1.传统轮播图
<div id="box"></div><div id="leftbtn"></div><ul> <li><[图片上传中。。。
（1）]> <li><[图片上传中。。。
（2）]></ul><ol> <li><[图片上传中。。。
（3）]> <li><[图片上传中。。。
（4）]> <li><[图片上传中。。。
（5）]> <li><[图片上传中。。。
（6）]></ol>
第一步，得到元素
var a = document.getElementById("box");
var left = document.getElementById("leftbtn");
var circles = document.getElementById("circles");
var b = document.getElementsByTagName("ul");
var c = document.getElementsByTagName("ol");
var bs = document.getElementsByTagName("li");
// 得到个数var length = bs.length;
// 克隆bs.cloneNode(true)
// 添加元素document.appendChild();
// 定义信息量var idx=0;
第二步，设置定时器
var t = setInterval()
// 鼠标移上（onmouseover）鼠标移开（onmouseout）
// 清除定时器clearInterval(t);
第三步，监听（左右及小圆点）按钮事件
left.onclick = function(){
//函数截流//
对象.isanimated 标记： 如果为true，说明它正在执行动画;
对象.xxx undefined, 假的if(b.isanimated) return;
//信号量的变化idx++;
//改变小圆点changeCircles();
//运动机构的移动animate(bs,{"属性（left）" : -设置（options）.宽（width） * idx}, 设置动画时间 ；
//根据信号量设置小圆点时建议用【排他模型】
//更换小圆点函数function changeCircle(){
//去掉所有小圆点的cur for (var i = 0; i < circlesLi.length; i++) {circlesLi[i].className = ""; }
//第信号量这个小圆点加cur circlesLi[idx].className = "cur";
}
2.间歇轮播图思路：
(1)得到元素
(2)复制一份到html
(3)定时器
setInterval(function(){ 设置样式 变化量 判断},1000 // 间隔时间)
3.呼吸轮播图(和传统轮播图写法相似)
/* 思路：1. 透明度 animate(物体, {"opacity": 1}, 1000) 不透明animate(物体, {"opacity": 0}, 1000) 透明
2. 切换（1） 定时器（2） 定时器函数中：-1 其他所有的变成透明（动画）-2 当前的变成不透明（动画）
*/// 得到元素后直接设置属性值//图片数量var imgLength = lis.length;
//图片宽度var width = 560;
//滚动速度var animatetime = 600;
//缓冲描述var tween = "Linear";
//间隔时间var interval = 2000; // 定义信息量 var idx = 0;
与传统轮播图不同的是：呼吸轮播加opacity（透明度）；
//原来的信号量的图片淡出 animate(lis[idx],{"opacity" : 0},1000); 透明
//信号量改变 idx = this.index;//新信号量的图片淡入 animate(lis[idx],{"opacity" : 1},1000); 不透明
1.先建立两个 div （div1 ， div2） div2包裹在div1中
2.将div2中用 ul 插入图片，并且使图片并排排列 "float " 最后去掉 ul 的点 "list-style"（去点在css中写即可）
<div class="rolling" id="rolling">
<div class="m_unit" id="m_unit">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
这两个步骤将无缝滚动轮播图的css内容准备好了，接下来就是js实现无缝滚动
1.先获取 div2这个盒子里面的 li
var a =div2. getElementsByTagName("li")
2.将获取到的 li 加一个定时器 使 li 里面的图片进行滚动
注意：在这之前我们还需要获取到div2中图片的总长度width
// oDiv.offsetWidth 代表 oDiv物体的 宽度值(width+padding+border)
console.log( aLi[0].offsetWidth )（在控制台输出div2中图片的总长度）
// maxLeft 最大的left值
var maxLeft = 0;
for (var i = 0; i < aLi.length; i++) {
maxLeft += aLi[i].offsetWidth;
maxLeft += 10; // 加外边距（每个图片的间距10）
}
console.log("maxLeft: " + maxLeft)
接下来我们再复制一份div2中的 ul 的图片 , 是为了轮播完以后没有东西轮播将复制的 ul 接在后面继续轮播，反复循环
// 再复制1份
var oUl = oDiv.getElementsByTagName("ul")[0];
oUl.innerHTML += oUl.innerHTML
然后我们给加一个定时器，并保存位置
// 创建定时器
var t = setInterval(move, 50)
// 保存位置
var x = 0;
// 定义1个函数 move
function move() {
// 1. 更新位置
oDiv.style.left = x + "px";
// 2. 修改x的值
x += -10;
if (x < -maxLeft) {
x = 0
}
}
最后别忘了更新完页面后去掉定时器，可以写一个鼠标移上去停止和移出轮播的事件
window.onload = function() {
// 得到物体
var oDiv = document.getElementById("m_unit")
oDiv.onmouseout = function() {
// 创建定时器
t = setInterval(move, 50)
}
oDiv.onmouseover = function() {
// 清除定时器
clearInterval(t)
}
最后，附上完整代码
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.rolling{
width: 800px;
height: 130px;
border: 10px solid #ccc;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.rolling .m_unit{
/*这是运动的单位*/
/*这个宽度足以致命，为了让所有的li能够并排*/
/*这个宽度随便取，大一点*/
width: 4000px;
position: absolute;
top: 0;
left: 0;
}
.rolling ul{
list-style: none;
}
.rolling ul li{
float: left;
margin-right: 10px;
}
</style>
<div class="rolling" id="rolling">
<div class="m_unit" id="m_unit">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
<script>
// 实现 无缝滚动！
// 思路： 获取子元素，然后在定时器中，定时更新子元素的left值
// 【15:15】 对对
// 整个页面加载完成
window.onload = function() {
// 得到物体
var oDiv = document.getElementById("m_unit")
oDiv.onmouseout = function() {
// 创建定时器
t = setInterval(move, 50)
}
oDiv.onmouseover = function() {
// 清除定时器
clearInterval(t)
}
// 得到所有 li 物体
var aLi = oDiv.getElementsByTagName("li")
// oDiv.offsetWidth 代表 oDiv物体的 宽度值(width+padding+border)
console.log( aLi[0].offsetWidth )
// maxLeft 最大的left值
var maxLeft = 0;
for (var i = 0; i < aLi.length; i++) {
maxLeft += aLi[i].offsetWidth;
maxLeft += 10; // 加外边距
}
console.log("maxLeft: " + maxLeft)
// 再复制1份
var oUl = oDiv.getElementsByTagName("ul")[0];
oUl.innerHTML += oUl.innerHTML
// 创建定时器
var t = setInterval(move, 50)
// 保存位置
var x = 0;
// 定义1个函数 move
function move() {
// 1. 更新位置
oDiv.style.left = x + "px";
// 2. 修改x的值
x += -10;
if (x < -maxLeft) {
x = 0
}
}
}
</script>
