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

2022-01-07 23:31:30 阅读：209 来源： 互联网

标签：right 轮播 jpeg let 初代 position 完整版 dot left

<!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>

标签：right,轮播,jpeg,let,初代,position,完整版,dot,left
来源： https://www.cnblogs.com/0811thomas/p/15777189.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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