js无缝轮播图

上一篇文章中的轮播图中,当滚到最后的一张图片时,就会回到第一张图片,这个过程中会显示之前的所有图片,那么怎样才能实在无缝滚动呢?
只需要在最后一张图片的后面复制一张第一张图片即可,当滚动到第5张图片时,把left的值设为0即可,
把上一篇文章中的代码改改就好.直接贴代码吧.
首先我们自定义一个动画,因为我用transition没做出来,不知道能不能实现,望大神指点.

//自定义动画
var AnimationUtils = {
    bufferMove: function (obj, target) {
        // 清除老的定时器
        clearInterval(obj.iTimer);
        // 开启新的定时器
        obj.iTimer = setInterval(function () {
            // 假设所有的属性均已运动完毕
            let bBtn = true;
            // 遍历包含运动属性以及终点值的对象
            for (let sAttr in target) {
                // 获取当前值
                let iCur;
                if (sAttr === 'opacity') {
                    iCur = parseFloat(getStyle(obj, sAttr)) * 100;
                } else {
                    iCur = parseInt(getStyle(obj, sAttr));
                }

                // 计算速度
                let iSpeed = (target[sAttr] - iCur) / 8;

                // 辨别方向 取整
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                // 计算下一次的值
                let iNext = iCur + iSpeed;

                // 赋值
                if (sAttr === 'opacity') {
                    obj.style[sAttr] = iNext / 100;
                    obj.style.filter = 'alpha(opacity=' + iNext + ')';
                } else {
                    obj.style[sAttr] = iNext + 'px';
                }

                // 判断当前属性是否运动完毕
                if (iNext !== target[sAttr]) {
                    bBtn = false;
                }
            }

            // 清除定时器
            if (bBtn === true) {
                clearInterval(obj.iTimer);
            }

        }, 60);
    }
};

//主代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="utils.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            background: #ffffff;
        }

        #wrap {
            width: 300px;
            height: 150px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        #list {
            width: 1200px;
            overflow: hidden;
            position: absolute;
            left: 0px;
            top: 0;
            /*transition: all 0.5s linear;*/
        }

        #list img {
            float: left;
            width: 300px;
            height: 150px;
        }

        #tab {
            position: relative;
            display: none;
        }

        #tab a {
            position: absolute;
            top: 50%;
            color: #ffffff;
            line-height: 50px;
            padding: 0 10px;
            background: rgba(0, 0, 0, 0.6);
            margin-top: 55px;
            cursor: pointer;
        }

        #left-btn {
            left: 0;
        }

        #right-btn {
            right: 0;
        }

        #btn {
            width: 300px;
            position: absolute;
            left: 0;
            bottom: 0;
            text-align: center;
        }

        .btn a {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            cursor: pointer;
        }

        .red {
            background: red;
        }

        .white {
            background: white;
        }

    </style>
    <script>
        window.onload = function () {
            let tab = $("tab");
            let leftBtn = $("left-btn");
            let rightBtn = $("right-btn");
            let list = $("list");
            let btn = $("btn");
            let tabs = tab.getElementsByTagName("a");
            let btns = btn.getElementsByTagName("a");

            let width = 300;//图片的宽度
            let index = 0;//记录当前是第几张图片
            let time = null;//记录定时器

            //复制第一张li添加到最后一个
            list.innerHTML += list.children[0].outerHTML;
            //重新计算list的宽度
            list.style.width = list.children.length * width + "px";

            //鼠标进入list时,tab显示
            list.onmouseenter = function () {
                clear();//清除定时器
                tab.style.display = "block";
            };

            //鼠标离开list时,tab隐藏
            list.onmouseleave = function () {
                tab.style.display = "none";
                start();//启动定时器
            };

            //遍历tabs,给每个tab加上进入离开事件,否则tab会跳动
            for (let i = 0; i < tabs.length; i++) {
                tabs[i].onmouseenter = function () {
                    clear();//清除定时器
                    tab.style.display = "block";

                };
                tabs[i].onmouseleave = function () {
                    tab.style.display = "none";
                    start();//启动定时器
                };
            }

            //点击右按钮往右走
            rightBtn.onclick = function () {
                rightMove();
            };

            //点击左按钮往左走
            leftBtn.onclick = function () {
                leftMove();
            };

            //启动定时器,自动播放
            start();

            //点击小圆点,切换图片
            for (let i = 0; i < btns.length; i++) {
                btns[i].onmouseenter = function () {
                    clear();//鼠标移入小圆点时清除定时器
                    index = i;
                    AnimationUtils.bufferMove(list, {left: -index * width});
                    redBtns(index);
                };
                btns[i].onmouseleave = function () {
                    start();//鼠标离开小圆点时开启定时器
                }
            }


            /**
             * 启动定时器
             * **/
            function start() {
                time = setInterval(function () {
                    rightMove();
                }, 2000);
            }


            /**
             * 清除定时器
             * */
            function clear() {
                clearInterval(time);
            }

            /**
             * 向左移动
             **/

            function leftMove() {
                //当index为-1时,设为3回到最后一张图,否则会空白
                index--;
                if (index < 0) {
                    list.style.left = -4*width+ "px";
                    index=3;
                }
                AnimationUtils.bufferMove(list, {left: -index * width});

                redBtns(index);//小圆点的滚动
            }

            /**
             * 向右移动
             */
            function rightMove() {
                index++;

                //当index为5是,设为left直接设为0回到第一张图,否则会显示空白
                if (index === 5) {
                    list.style.left = 0;
                    index = 1;
                }

                //自定义动画
                AnimationUtils.bufferMove(list, {left: -index * width});

                redBtns(index);//小圆点的滚动

                //如果index=4,则说明图片是第五张,但是小圆点只有四个,所以将第一个小圆点设为red
                if (index === 4) {
                    btns[0].className = "red";
                }
            }

            /**
             * 小红点的滚动
             * @param index
             */
            function redBtns(index) {
                //遍历循环所有的小圆点,看当前的index和i的值是否相等
                for (let i = 0; i < btns.length; i++) {
                    i === index ? btns[i].className = "red" : btns[i].className = "white";
                }
            }

        }

    </script>
</head>
<body>
<div id="wrap">

    <div id="list">
        <img src="img/img1.jpg" alt="">
        <img src="img/img2.jpg" alt="">
        <img src="img/img3.jpg" alt="">
        <img src="img/img4.jpg" alt="">
    </div>
    <div id="tab">
        <a id="left-btn" href="javascript:">&lt;</a>
        <a id="right-btn" href="javascript:">&gt;</a>
    </div>
    <div id="btn" class="btn">
        <a class="red" href="javascript:"></a>
        <a href="javascript:"></a>
        <a href="javascript:"></a>
        <a href="javascript:"></a>
    </div>
</div>
</body>
</html>

猜你喜欢