实现无缝轮播_无缝轮播,淡入淡出-优快云博客

本文链接：https://blog.youkuaiyun.com/SZ_HMT/article/details/76339297
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none
        }
        #box{
            width: 540px;
            height: 216px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        #box ul{
            width: 5000px;
            height: 216px;
            position: absolute;
            left: -540px;
            top:0;
        }
        #box ul li{
            float: left;
            width: 540px;
        }
        li img{
            width: 540px;
        }
        #left{
            position: absolute;
            width: 50px;
            height: 50px;
            line-height: 50px;
            background: #666;
            opacity: 0.5;
            filter: alpha(opacity = 50);
            left: 0;
            top: 83px;
            text-align: center;
        }

        #right{
            position: absolute;
            width: 50px;
            height: 50px;
            line-height: 50px;
            background: #666;
            opacity: 0.5;
            filter: alpha(opacity = 50);
            right: 0;
            top: 83px;
            text-align: center;
        }
        #count{
            width: 68px;
            height: 10px;
            position: absolute;
            right: 40px;
            bottom: 20px;
        }
        #count span{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            margin-left: 3px;
            background-color: #000;
        }
        #count span.bgcolor{
            background-color: #f90;
        }

    </style>
    <script src="tool.js"></script>
    <script>
        window.onload = function(){
            var box = document.getElementById('box');
            var ul = box.getElementsByTagName('ul')[0];
            var liList = ul.getElementsByTagName('li');

            var left = document.getElementById('left');
            var right = document.getElementById('right');
            var spans = document.getElementById('count').getElementsByTagName('span');
            //通过js获取图片/li的宽度,得到每次轮播移动多少像素
            var imgWidth = liList[0].offsetWidth;
            //定义当前轮播图的下标(用来记录下一次该展示第几张图片)
            var index = 1; // 图片从第一张开始 index==0 其实是最后一张图片
            //页面小圆点高亮的下标
            var num = 0

            //开始进行轮播
            box.timer = setInterval(showRight,1500);
            //鼠标移入停止计时器
            box.onmouseenter = function(){
                clearInterval(box.timer);
            }
            //鼠标移除开始计时器
            box.onmouseleave = function(){
                box.timer = setInterval(showRight,2000);
            }

            left.onclick = showLeft;
            right.onclick = showRight;

            function showRight(){
                index++;
                num++;
                if(num >spans.length-1){
                    num = 0;
                }

                if(index > liList.length-1){ //上一次已经展示了第一张(li最后一张)了,该展示第二张
                    // 直接设置css属性left 是没有动画效果的 无缝的让最后一张跳回 第1张
                    ul.style.left = -imgWidth + 'px';
                    //改变index值 动画效果的让第一张移动到第二张
                    index = 2;
                }
                fnMove(ul,{left:-imgWidth * index})
                activeSpan(num);

                /*
                var fn = null;
                if(index >= liList.length-1){
                    fn = function(){
                        ul.style.left = -imgWidth + 'px';
                        index = 1
                    }
                }
                    fnMove(ul,{left:-imgWidth * index},fn)
*/

            }

            function showLeft(){
                index--;
                num--;
                if(num < 0){
                    num = spans.length - 1;
                }
                if(index < 0){
                    //这已经是li最后一张(用户看到的是第5张)该展示第4张
                    ul.style.left = -imgWidth * (liList.length - 2) + 'px';
                    index = (liList.length - 3);
                }
                fnMove(ul,{left:-imgWidth * index})
                activeSpan(num);
            }

//zj
               for(var i = 0;i<spans.length;i++){
                   spans[i].index = i + 1;
                   spans[i].onclick = function(){
                       i = this.index;
//
                       num = i-1;
//                       console.log(num)
                       fnMove(ul,{left:-imgWidth*(num+1)})
//                       console.log( ul.style.left)
                       activeSpan(num)
                       index = this.index;
                       console.log(index);
                   }
                   fnMove(ul,{left:-imgWidth*index })
               }

            //高亮小圆点方法
            function activeSpan(num){
                for (var i = 0;i<spans.length;i++){
                    spans[i].className = '';
                }
                spans[num].className = 'bgcolor'
            }

        }
    </script>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="img/5.jpg"></li>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
        <li><img src="img/5.jpg"></li>
        <li><img src="img/1.jpg"></li>
    </ul>
    <div id="left">&lt;</div>
    <div id="right">&gt;</div>
    <div id="count">
        <span class="bgcolor"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
</body>
</html>