轮播图心得

1.传统轮播图

  
<[图片上传中。。。
（1）]>  
<[图片上传中。。。
（2）]>
  
<[图片上传中。。。
（3）]>  
<[图片上传中。。。
（4）]>  
<[图片上传中。。。
（5）]>  
<[图片上传中。。。
（6）]>

第一步，得到元素

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中写即可）

  

        

            

                
![](images/shuzi/0.png)
                
![](images/shuzi/1.png)
                
![](images/shuzi/2.png)
                
![](images/shuzi/pangzi.png)
                
![](images/shuzi/4.png)
                
![](images/shuzi/5.png)
                
![](images/shuzi/6.png)
                
![](images/shuzi/7.png)
            
        
    

  这两个步骤将无缝滚动轮播图的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)
    }

最后，附上完整代码
    

    

        

            

                
![](images/shuzi/0.png)
                
![](images/shuzi/1.png)
                
![](images/shuzi/2.png)
                
![](images/shuzi/pangzi.png)
                
![](images/shuzi/4.png)
                
![](images/shuzi/5.png)
                
![](images/shuzi/6.png)
                
![](images/shuzi/7.png)