本篇文章给大家分享的内容是js如何实现轮播效果，有着一定的参考价值，有需要的朋友可以参考一下
网上有很多的例子介绍，在这里我所做的无缝滚动就是 通过改变元素的left值让图片呈现左右滚动的效果。
我们首先看一下 p+css 的结构样式： 
p+css代码
nbsp;html>*{ margin: 0; padding: 0; } ul,ol{ list-style: none; } /*消除图片底部3像素距离*/ img{ vertical-align: top; } .scroll{ width: 500px; height: 200px; margin: 100px auto; border: 1px solid #ccc; padding: 7px; overflow: hidden; position: relative; } .box{ width: 500px; height: 200px; overflow: hidden; position: relative; } .box ul{ width: 600%; position: absolute; left: 0; top: 0; } .box ul li{ float: left; } .scroll ol{ position: absolute; right: 10px; bottom: 10px; } .scroll ol li{ float: left; width: 20px; height: 20px; background: pink; text-align: center; line-height: 20px; border-radius: 50%; background-color: pink; margin-left:10px ; cursor: pointer; } .scroll ol li.current{ background-color: purple; }
登录后复制
1 2 3 4 5
展示效果如图： 
接下来我们要将js 代码 ，
再此之前 我们要明白，小圆点 1 2 3 并不是写死的，它是根据ul li中的图片张数来决定的 ，所以 我们要先把p中ol li中的代码去掉
要实现无缝滚动 就需要多一张图片才行 ，即克隆第一张图片，放到最后面。此时css布局保留，p中只剩下：
登录后复制
此时我们用js代码生成小圆点
var scroll = document.getElementById("scroll"); // 获得大盒子 var ul = document.getElementById("ul"); // 获得ul var ulLis = ul.children;// 获得ul的盒子 以此来生成ol中li的个数 var liWidth = ul.children[0].offsetWidth;// 获得每个li的宽度 // 操作元素 // 因为要做无缝滚动，所以要克隆第一张，放到最后一张后面 // 1. 克隆元素 ul.appendChild(ul.children[0].cloneNode(true)); // 2.创建ol 和li vaar ol = document.createElement("ol");//创建ol元素 scroll.appendChild(ol);// 把ol放到scroll盒子里面去 for (var i=0;i此时ol li元素即小圆点创建完毕 我们接着用js做动画
动画部分包括：
1.鼠标经过第几个小圆点，就要展示第几张图片，并且小圆点的颜色也发生变化
2.图片自动轮播，（这需要一个定时器）
3.鼠标经过图片，图片停止自动播放（这需要清除定时器）
4.鼠标离开图片，图片继续自动轮播 （重新开始定时器）
这里我们封装了一个animate()动画函数
// 动画函数 第一个参数，代表谁动 第二个参数 动多少 // 让图片做匀速运动，匀速动画的原理是 当前的位置 + 速度 即 offsetLeft + speed function animate(obj,target){ // 首先清除掉定时器 clearInterval(obj.timer); // 用来判断 是+ 还是 - 即说明向左走还是向右走 var speed = obj.offsetLeft 定时器 函数
var timer = null; // 轮播图的定时器 var key = 0;// 控制播放的张数 var circle = 0;// 控制小圆点 timer = setInterval(autoplay,1000);// 自动轮播 function autoplay(){ /*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1, 就要重头开始播放. 因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/ key++; // 先++ if(key > ulLis.length-1){// 后判断 ul.style.left = 0; // 迅速调回 key = 1; // 因为第6张是第一张，所以播放的时候是从第2张开始播放 } // 动画部分 animate(ul,-key*liWidth); // 小圆点circle 当显示第几张图片是，对应的小圆点的颜色也发生变化 /*同理,对小圆点也要有一个判断*/ circle++; if (circle > olLis.length-1) { circle = 0; } // 小圆点颜色发生变化 for (var i = 0 ; i 好啦，这里我们展示了主要代码，具体代码，查看这里下载js实现轮播效果
登录后复制
以上就是js如何实现轮播效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2773252.html
