原生js实现图片循环轮播效果

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .block{
            position: relative;
            width:1000px;
            height: 400px;
            border: 1px solid grey;
            margin: 10% auto;
            overflow: hidden;
        }
        .ullist{
            width:7000px;
            height: 400px;
        }
        .ullist li{
            float: left;
            width:1000px;
            list-style: none;
            height:400px;
        }
        .b{
            transition: all 0.5s ease-in-out;
        }
        img{
            width:1000px;
            height:400px;
        }
        .banner{
            position: absolute;
            bottom: 0;
            width:160px;
            height: 20px;
            margin-left: 420px;
        }
        .dian{
            float: left;
            width:15px;
            height: 15px;
            border:1px solid silver;
            border-radius: 50%;
            background-color: black;
            margin: 0px 2px;
        }
    </style>
</head>
<body>
<div class="block">
    <ul class="ullist">
        <li><img src="./img/demo1.jpg"></li>
        <li><img src="./img/demo2.jpg"></li>
        <li><img src="./img/demo3.jpg"></li>
        <li><img src="./img/demo4.jpg"></li>
        <li><img src="./img/demo5.jpg"></li>
        <li><img src="./img/demo6.jpg"></li>
        <li><img src="./img/demo1.jpg"></li>
    </ul>
    <div class="banner" >
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
    </div>
</div>
<script>
    //轮播
    var times;
    var count=0;
    window.onload=function() {
        //获取ul
        //获取block
        var ullist = document.getElementsByClassName("ullist")[0];
        var par = document.getElementsByClassName("block")[0];
        var dian=document.getElementsByClassName("dian");
        dian[0].style.backgroundColor="red";
        par.onmouseenter = function () {
            clearInterval(times);
        };
        par.onmouseleave = function () {
            times = setInterval(function () {
               imgbo();
            }, 2000);
        };
        //整体循环执行
        times = setInterval(function () {
            //给ul添加属性b,过渡执行count<ullist.children.length-2的图片
            imgbo();
        }, 2000);
        //鼠标进入dian
        for(var i=0;i<dian.length;i++){
            dian[i].index =i;
          dian[i].onmouseenter =function(){
              dian[count].style.backgroundColor="black";
              this.style.backgroundColor="red";
              count=this.index;
              ullist.className="ullist b";
              ullist.style.marginLeft=(-1000*count)+"px";
          }
        }
        function imgbo() {
            ullist.className = "ullist b";
            dian[count].style.backgroundColor="black";
            count++;

            ullist.style.marginLeft = (-1000 * count) + "px";
            console.log(count);
            setTimeout(function () {//只执行一次
                if (count > ullist.children.length - 2) {
                    ullist.className = "ullist";//
                    count = 0;
                    ullist.style.marginLeft = "0px";
                }
                dian[count].style.backgroundColor="red";
            }, 500);
        }
    }
</script>
</body>
</html>
原生js实现图片循环轮播效果

猜你喜欢
