网上有很多的例子介绍，在这里我所做的无缝滚动就是 通过改变元素的left值让图片呈现左右滚动的效果。
我们首先看一下 div+css 的结构样式：
div+css代码
展示效果如图：
接下来js代码，再此之前我们要明白，小圆点 1 2 3 并不是写死的，它是根据ul li中的图片张数来决定的 ，所以我们要先把div中ol li中的代码去掉。
要实现无缝滚动就需要多一张图片才行 ，即克隆第一张图片，放到最后面。此时css布局保留，div中只剩下：
// 2.创建ol 和li
vaar ol = document.createElement("ol");//创建ol元素
scroll.appendChild(ol);// 把ol放到scroll盒子里面去
for (var i=0;i<ulLis.length-1;i++) {
var li = document.createElement("li");// 创建li元素
li.innerHTML = i + 1;// 给li里面添加文字 1 2 3 4 5
ol.appendChild(li);// 将li元素添加到ol里面
}
ol.children[0].className = "current";// ol中的第一个li背景色为purple
此时ol li元素即小圆点创建完毕 我们接着用js做动画
动画部分包括：
1.鼠标经过第几个小圆点，就要展示第几张图片，并且小圆点的颜色也发生变化 2.图片自动轮播，（这需要一个定时器） 3.鼠标经过图片，图片停止自动播放（这需要清除定时器） 4.鼠标离开图片，图片继续自动轮播 （重新开始定时器） 这里我们封装了一个animate()动画函数
function animate(obj,target){
// 首先清除掉定时器
clearInterval(obj.timer);
// 用来判断 是+ 还是 - 即说明向左走还是向右走
var speed = obj.offsetLeft < target ? 15 : -15;
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;//它们的差值不会超过speed
obj.style.left = obj.offsetLeft + speed + "px";
// 有可能有小数的存在，所以在这里要做个判断
if (Math.abs(result) <= Math.abs(speed)) {
clearInterval(obj.timer);
obj.style.left = target + "px";
}
},10);
}
定时器 函数
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 < olLis.length;i++) {
// 先清除掉所用的小圆点类名
olLis[i].className = "";
}
// 给当前的小圆点 添加一个类名
olLis[circle].className = "current";
}
好啦，这里我们展示了主要代码，具体代码，查看这里下载nofollow" target="_blank" href="http://download.csdn.net/detail/diligentkong/9755094">js实现轮播效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/js/41629.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
