轮播图

使用原生JS制作轮播图

利用将图片组合为一个序列，然后通过移动和父元素的overflow:hidden实现轮播

效果图:

基础的html代码:

<div id="box2">
        <img id="L" src="pic/L.png"/>
        <img id="R" src="pic/R.png"/>
        <ul id="dot">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div id="imgbox">
            <img src="pic/1.jpg"/>
            <img src="pic/2.jpg"/>
            <img src="pic/3.jpg"/>
            <img src="pic/4.jpg"/>
            <img src="pic/5.jpg"/>
        </div>

 

 

 

CSS代码:

ul,li{
            list-style: none;
        }

        #box1{
            position: relative;
            width: 100%;
            height: 313px;
        }

        #box2{
            position: relative;
            width: 500px;
            height: 313px;
            overflow: hidden;
            margin: auto;
        }

        #L,#R{
            position: absolute;
            width: 37.8px;
            height: 57.4px;
            z-index: 2;
            cursor:pointer;
            top:50%;
            margin-top:-20px;
            display:block;
        }

        #L{
            left: 0;
        }

        #R{
            right: 0;
        }

        #imgbox{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0px;
            top: 0;
            z-index: 1;
　　　　　　　//设置淡入淡出
            transition-duration: 1s;
            transition-timing-function: ease-in-out;
        }

        #imgbox img{
            float: left;
            width: 500px;
            height: 313px;
        }

        #dot{
            position: absolute;
            right: 180px;
            bottom: 0px;
            z-index: 2;
        }

        #dot li{
            width: 10px;
            height: 10px;
            float: left;
            border-radius: 100%;
            margin-right: 18px;
            background-color: rgb(153,50,204);
        }

 

关键的JS代码:

//获取各元素已便于后续操作
    var boxele2 = document.getElementById("box2");
    var imgboxele = document.getElementById("imgbox");
    var doteles = document.getElementById("dot").getElementsByTagName("li");
    var Lrow = document.getElementById("L");
    var Rrow = document.getElementById("R");
    var currentIndex = 0;
    var parIndex = 0;
    var time = null;

    time = window.setInterval(nextImg,1000);

    //圆点绑定事件
    for(var i=0; i<doteles.length;i++){
        doteles[i].setAttribute("id",i);
        doteles[i].addEventListener("mouseenter",overDot);
    }
    //左右箭头绑定事件
    Lrow.addEventListener("click",preImg);
    Rrow.addEventListener("click",nextImg);
    //设置鼠标悬停时停止轮播以及箭头浮现
    boxele2.addEventListener("mouseover",function() {
        window.clearInterval(time);
        Lrow.style.display = "block";
        Rrow.style.display = "block";
    });
    //鼠标离开后继续轮播，箭头隐藏
    boxele2.addEventListener("mouseout",function() {
        time = window.setInterval(nextImg,1000);
        Lrow.style.display = "none";
        Rrow.style.display = "none";
    });

    changeDot(currentIndex,parIndex);
    //获取当前图片的id
    function overDot(){
        parIndex = currentIndex;
        currentIndex = parseInt(this.id);
        changeDot(parIndex,currentIndex);
        moveImg();
    }
    //图片切换原理：将图片组合成一个序列后移动来选择显示哪张图片
    function moveImg(){
        imgboxele.style.top = -currentIndex * 313 + "px";
    }
    //设置圆点的颜色
    function changeDot(parIndex,currentIndex){
        doteles[parIndex].style.backgroundColor = "rgb(153,50,204)";
        doteles[currentIndex].style.backgroundColor = "rgb(173,255,47)";
    }
    //切换上一张图片
    function preImg(){
        parIndex = currentIndex;
        if(currentIndex != 0){
            currentIndex--;
        }else{
            currentIndex = 4;
        }
        changeDot(parIndex,currentIndex);
        moveImg();
    }
    //切换下一张图片
    function nextImg(){
        parIndex = currentIndex;
        if(currentIndex != 4){
            currentIndex++;
        }else{
            currentIndex = 0;
        }
        changeDot(parIndex,currentIndex);
        moveImg();
    }