初代轮播图（后续我会更新完整版) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{margin: 0;padding: 0}
        #rollImage
        {
            width: 960px;
            height: 320px;
            position: relative;
            margin: auto;
            overflow: hidden;
        }
        #imgCon{
            position: absolute;
            height: 320px;
            transition: all 1s;
        }
        #dot{
            list-style: none;
            position: absolute;
            bottom: 10px;

        }
        #dot>li
        {
            float: left;
            width: 18px;
            height: 18px;
            border-radius: 11px;
            border: 1px solid rgba(255,0,0,0.4);
            background-color: rgba(255,0,0,0);
            margin-left: 10px;
        }
        #left
        {
            position: absolute;
            left:5px;
            top:130px;
        }
        #right{
            position: absolute;
            right: 5px;
            top:130px;
        }
    </style>
</head>
<body>
    <div id="rollImage">
        <div id="imgCon"></div>
        <ul id="dot"></ul>
        <img src="img/left.png" id="left">
        <img src="img/right.png" id="right">
    </div>
</body>
</html>
<script>
    let imgCon,dot,left,right;

    let imgList=["a.jpeg","b.jpeg","c.jpeg","d.jpeg","e.jpeg"];
    let position=0;
    let preDot;
    init();
    function init(){
         imgCon=document.getElementById("imgCon");
         dot=document.getElementById("dot");
         left=document.getElementById("left");
         right=document.getElementById("right");

         for (let i=0;i<imgList.length;i++){
            let img=new Image();
            img.src="img/"+imgList[i];
            imgCon.appendChild(img);
            img.style.width="960px";
            img.style.height="320px";
            let li=document.createElement("li");
            dot.appendChild(li);
         }
        //  第一次点的时候是空的
         imgCon.style.left="0px";

         imgCon.style.width=960*imgList.length+"px";
         dot.style.left=(960-dot.offsetWidth)/2+"px";
         dot.addEventListener("click",dotClickHandler);
         preDot=dot.firstElementChild;
         preDot.style.backgroundColor="rgba(255,0,0,0.8)";
         left.addEventListener("click",bnClickHandler);
         right.addEventListener("click",bnClickHandler);
    }
    function dotClickHandler(e){
        for(let i=0;i<dot.children.length;i++){
            if(dot.children[i]===e.target){
                position=i;
            }
        
        }
        imgCon.style.left=-position*960+"px";
        changeDot();
    }
    // 左右按钮的函数
    function bnClickHandler(){
        if(this===left){
            position--;
            if(position<0){
                position=imgList.length-1;
            }
        }else if(this===right){
            position++;
            if(position>imgList.length-1){
                position=0;
            }
        }
        imgCon.style.left=-position*960+"px";
        changeDot();
    }
    // 小圆点跟随图片改变
    function changeDot() {
            preDot.style.backgroundColor="rgba(255,0,0,0)";
            preDot=dot.children[position];
            preDot.style.backgroundColor="rgba(255,0,0,0.6)";
        }
</script>

 

posted @ 2022-01-07 23:19  thomas_001  阅读(45)  评论(0)    收藏  举报