PC端的无缝轮播图原生代码

HTML代码

    <
    >
    

        

            
        
        

            
        
        

            
        
        

            
        
    

    


    

css代码

.zj {
    position: relative;
    top: 10px;
    left: 10px;
    width: 721px;
    height: 455px;
    overflow: hidden;
}

.zj>ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}

.zj>ul li {
    float: left;
}

.zj .zuo,
.zj .you {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    height: 40px;
    width: 24px;
    background: rgba(0, 0, 0, .3);
    line-height: 40px;
    text-align: center;
    color: #fff;
    z-index: 999;
}

.zj .zuo:hover {
    color: #B1191A;
}

.zj .you {
    right: 0;
}

.zj .you:hover {
    color: #B1191A;
}

.zj .dian {
    position: absolute;
    bottom: 10px;
    left: 52px;
}

.zj .dian li {
    float: left;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border: solid 2px #CA8CE1;
    border-radius: 6px;
    cursor: pointer;
}

.zj .dian .st {
    background-color: #fff;
    border: solid 2px #fff;
}

js原生代码

window.addEventListener('load', function() {
	// 获取元素
    var zuo = document.querySelector('.zuo');
    var you = document.querySelector('.you');
    var zj = document.querySelector('.zj ');
    var w = zj.offsetWidth;
    // 当鼠标放在上面时，停止定时器，显示左右切换图片按钮
    zj.addEventListener('mouseover', function() {
        zuo.style.display = 'block';
        you.style.display = 'block';
        clearInterval(time);
        time = null;
    });
    // 鼠标离开的时候，隐藏左右按钮，启动定时器
    zj.addEventListener('mouseout', function() {
        zuo.style.display = 'none';
        you.style.display = 'none';
        time = setInterval(function() {
            you.click();
        }, 3000);
    });
    // 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈
    var ul = zj.querySelector('ul');
    var ol = zj.querySelector('ol');
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ol.appendChild(li);
        li.addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'st';
            var index = this.getAttribute('index');
            //将小圆圈的索引号赋值给左右按钮的值
            num = s = index;
            animate(ul, -index * w);
        })
    }
    var num = 0;
    var s = 0;
    var flag = true;
    // 需要无缝滚动，需要把第一张图片克隆到最后面，需要在动态生成小圆点后
    ol.children[0].className = 'st';
    ul.appendChild(ul.children[0].cloneNode(true));
	// 右边按钮点击事件，让ul向右边滚动一张图片的距离
    you.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * w, function() {
                flag = true;
            });
            s++;
            if (s == ol.children.length) {
                s = 0;
            }
            ptsx();
        }
    });
    // 左按钮点击事件
    zuo.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = num * -w + 'px';
            }
            num--;
            animate(ul, -num * w, function() {
                flag = true;
            });
            s--;
            if (s < 0) {
                s = ol.children.length - 1;
            }
            ptsx();
        }
    });
	// 点击小圆点时的排他思想，封装函数，
    function ptsx() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[s].className = 'st';
    };
	当什么都没有操作时，让他自动3S钟点击一次右按钮
    var time = setInterval(function() {
        you.click();
    }, 3000);
});

//动画封装
function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}