js无缝轮播图(手动轮播+自动轮播+定时器+过渡动画)

为了方便大家使用，我把Html，CSS，以及js 和用到图片都放在下面了。**

特此说明：这个无缝轮播的代码是可以直接复制粘贴使用，嘻嘻！

1.先新建一个文件，随意命名即可。
2.然后打开文件夹，再新建。
3.把文章底部的5张图片保存到images文件夹里面。
4.用你的编辑器打开这个文件夹
5.剩下的就是复制粘贴到对应的里面就可以了

Html和Css
这里再说一下我是直接把css样式直接写在了style里面，这个没有引入，js的代码比较长，直接外部引入的js，就是这两句

Html和Css代码在这里开始

    
    
    
    
    
    



    

        

            
            
            
            
            

        
        

        
‹
        
›

这里就是js的代码了，一共两个，一个叫无缝轮播.js,另一个叫animate.js

无缝轮播.js

window.onload = function () {
    console.log(111);
    var banner = document.querySelector(".banner");
    var bannerWidth = banner.offsetWidth;
    console.log(bannerWidth);
    var imgs = document.querySelectorAll(".ul img");
    var uls = document.querySelector(".banner .ul");
    var newImg = imgs[0].cloneNode(true);
    console.log(imgs[0].offsetWidth);
    uls.appendChild(newImg);
    var left = document.querySelector(".left");
    var right = document.querySelector(".right");
    banner.onmouseenter = function () {
        left.style.display = "block";
        right.style.display = "block";
    }
    banner.onmouseleave = function () {
        left.style.display = "none";
        right.style.display = "none";
    }

    var curcle = document.querySelector(".curcle");
    for (var i = 0; i < imgs.length; i++) {
        // console.log(imgs.length);
        // 动态创建小圆点
        var lis = document.createElement("li");
        curcle.appendChild(lis);
        //给底部的小圆点添加点击效果
        // lis.className = "select";

        // 动态修改长度
        // var uls = document.querySelector(".banner .ul");
        uls.style.width = (imgs.length + 1) * 1000 + "px";
    }
    var lis = document.querySelectorAll(".curcle li");
    console.log(lis);
    for (var i = 0; i < lis.length; i++) {
        lis[0].className = "select";
        lis[i].index = i;
        lis[i].onclick = function () {
            console.log(this.index);
            document.querySelector(".select").className = "";
            // lis[i].className = "";
            this.className = "select";
            // var bannerWidth = banner.offsetWidth;
            // console.log(bannerWidth);
            // animate(ul, -index *)
            //   var uls = document.querySelector(".banner .ul");
            animate(uls, -this.index * bannerWidth);
            // console.log(-this.index * imgs[0].offsetWidth);
        }
    }
    //点击右侧按钮，实现图片的滚动
    var num = 0;

    var circle = 0;
    //设置节流阀
    var flag = true;
    right.addEventListener('click', function () {

        console.log(num);
        if (num == imgs.length) {
            uls.style.left = 0;
            num = 0;

        }
        num++;
        animate(uls, -num * bannerWidth);
        circle++;
        if (circle == imgs.length) {
            circle = 0;
        }
        circleChange();

    });
    //点击左侧按钮，实现图片的滚动
    left.addEventListener('click', function () {
        console.log(num);
        if (num == 0) {
            num = imgs.length;
            uls.style.left = -(num) * bannerWidth + "px";
        }
        num--;
        animate(uls, -num * bannerWidth);
        circle--;
        if (circle < 0) {
            circle = imgs.length - 1;
        }
        circleChange();

    });
    function circleChange() {
        for (var i = 0; i < imgs.length; i++) {
            lis[i].className = "";
        }
        lis[circle].className = "select";
    };

    //10定时器
    var time = setInterval(function () {
        right.click();
    }, 2000);
    uls.onmouseenter = function () {
        clearInterval(time);
    }
    uls.onmouseleave = function () {
        time = setInterval(function () {
            right.click();
        }, 2000);
    }
}

ainimate.js

function animate(element,position){
    // 每次进来先把之前的定时器清空
    clearInterval(element.time);
    element.time = setInterval(function(){
    // 现获取这个标签所在的位置
    var current = element.offsetLeft;
    var step = current > position ? -10 :10;
    // 现在的位置和⽬标位置的差值⼩于 每次移动的距离 直接到达⽬标
    if (Math.abs(current - position)>step) {
    // 还需要接着⾛step
    element.style.left = current + step +"px";
    }else{
    // 如果⾛到最后⼀步 就直接让元素 到达⽬标
    element.style.left = position + "px";
    clearInterval(element.time);
    }
    },5)
    }

下面是用到的轮播图片以及我的样式目录
1.jpg

2.jpg

3.jpg

4.jpg

5.jpg