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

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

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

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

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

Html和Css代码在这里开始

                         * {     padding: 0;     margin: 0;     list-style: none; } .banner {     position: relative;     width: 1000px;     height: 428px;     margin: 100px auto;     cursor: pointer;     /* overflow: hidden; */ } .banner .ul {     position: absolute;     height: 428px;  } .banner .ul img {     float: left;     width: 1000px;     height: 428px; } .left, .right {     position: absolute;     top: 50%;     width: 50px;     height: 50px;     font-size: 40px;     margin-top: -25px;     color: #fff;     cursor: pointer;    text-align: center;     line-height: 40px;     display: none;     /* right: 10px;     left: 10px; */ } .left:hover, .right:hover {     color: #ff6700;     background-color: #eee; } .banner .left {     left: 10px; } .banner .right {     right: 10px; } .curcle {     position: absolute;     right: 0;     bottom: 5px; } .curcle li {     float: left;     width: 10px;     height: 10px;     border: 3px solid #333;     border-radius: 50%;     color: #000;     background-color: #fff;     margin: 5px;     cursor: pointer; } .curcle .select {     float: left;     width: 10px;     height: 10px;     border: 3px solid #fff;     border-radius: 50%;     color: #000;     background-color: #ff6700;     margin: 5px;     cursor: pointer; }        
 
                          
 
 
‹
 
›

这里就是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