轮播图源码（javaScript)

1. 布局

html

<div class="focus"> 
    //左右按钮图标 javascript:; 点击不跳转回顶部 
    <a href="javascript:;" class="arrow_l">  </a> 
    <a href="javascript:;" class="arrow_r">  </a> 
    //核心滚动区域 
    <ul> 
        <li> <a href=""><img src="images/banner1.jpg"/></a> </li> 
    </ul> 
    //提示小圆圈 
    <ol> </ol> 
</div>

.focus{     
    position: relative;     
    width: 580px;     
    height: 313px;     
    overflow: hidden; 
} 
.focus ul{     
    position: absolute;      
    top: 0;     
    left: 0;     
    width: 800%; 
  } 
.arrow_l,.arrow_r{     
    position: absolute;     
        top: 45%;     
        width: 24px;     
        height: 40px;     
        background:rgba(0, 0, 0, .3);     
        text-align: center;     
        line-height: 40px;     
        color: #fff;     
        display: none;     
        z-index: 2;/* 两个绝对定位，防止覆盖  数值越高，越在前面显示*/ 
  }  
  .arrow_r{     
      right: 0px; 
  } 
  .focus ol{     
      position:absolute;     
      bottom: 10px;     
      left: 40%; 
  } 
  .focus ol li{     
      float: left;     
      width: 8px;     
      height: 8px;     
      border: 1px solid #fff;     
      border-radius: 50%;     
      margin: 0 3px;     
      cursor: pointer; 
  }

2. 鼠标经过就显示隐藏的左右按钮

focus.addEventListener('mouseenter',function(){         
    arrow_l.style.display = 'block';         
    arrow_r.style.display = 'block'; 
});  
focus.addEventListener('mouseleave',function(){         
    arrow_l.style.display = 'none';         
    arrow_r.style.display = 'none';   
});

3. 根据图片数量，动态生成小圆圈

var ul = focus.querySelector("ul"); 
var ol = focus.querySelector("ol"); 
for(var i=0;i<ul.children.length;i++){ 
    //创建一个li 
    var li = document.createElement("li");         
    //把li插入ol中         
    ol.appendChild(li); } 
    // 把ol里面的第一个li设置类名为current 
    ol.children[0].className = 'current';
}

4. 给点击的小圆圈加current样式

//排他思想 我们可以在生成小圆圈的同时，直接绑定点击事件 
for(){ 
    ... 
    li.addEventListener('click',function(){ 
    //干掉所有人，把所有li清除current 类名             
    for(var i=0;i<ol.children.length;i++){                 
        ol.children[i].className='';             
    } 
    //留下自己，当前的li设置为current类名             
    this.className = 'current'; 
    })
}

5. 点击小圆圈，移动图片

//引入封装的animate.js文件 
//这个animate.js文件必须写到index.js文件前面 
//核心算法：移动ul 图片移动距离= 小圆圈索引号 * 图片宽度 
//事件在li.addEventListener('click',function(){})中发生 
//图片宽度（全局变量） 
var focusWidth = focus.offsetWidth; 
//通过自定义属性，记录生成的li的索引号（写在li生成时） 
li.setAttribute('index',i); 
li.addEventListener('click',function(){ 
    //拿到当前点击的li的索引号 
    var index = this.getAttribute('index'); 
    //调用animate函数
    animate(ul,-index * focusWidth); 
    //当点击某一li时，就要把索引值赋给num,circle 
    num = index; 
    circle = index; 
});

6. 点击左右按钮切换图片

图片无缝滚动原理

• 克隆第一张图片复制到ul最后面

//写在小圆圈生成完成之后 
var first = ul.children[0].cloneNode(true); 
ul.appendChild(first);

• • 克隆出来的最后一张图片不需要生成小圆点
• • 里面的子节点也要克隆
• 当滚动到最后一张图片时，让 ul 的 left 属性为 0
• num 赋值为 0 ，重新开始滚动

//声明变量，点击一次自增1，乘以图片宽度，就是 ul 的滚动距离； 
var num = 0; 
arrow_r.addEventListener('click',function(){ 
    //如果走到了最后一张克隆的图片(图片张数-1)，要让ul的left属性值复原为0 
    if(num == ul.children.length-1){ 
        ul.style.left = 0; num = 0; 
    } 
    num++; 
    animate(ul,-num * focusWidth); 
}); 
arrow_l.addEventListener('click',function(){         
    if(num == 0){                
        num=ul.children.length - 1;                    
        ul.style.left = -num * focusWidth + 'px';                    
    }         
    num--;         
    animate(ul,-num * focusWidth); 
});

7. 控制小圆圈的变化

var circle = 0; 
arrow_r.addEventListener('click',function(){ 
    ... 
    circle++; 
    //由于最后一张克隆的图片不生成小圆圈，所以显示最后一张时circle=0 
    //先判断，再操作 
    if(circle ==ol.children.length){ 
        circle = 0; 
    } 
    //先清除其余小圆圈current类名 
    for(var i =0;i<ol.children.length;i++){ 
        ol.children[i].className = '';
    } 
    //留下当前的小圆圈的current类名 
    ol.children[circle].className = 'current';
});
arrow_l.addEventListener('click',function(){        
    ...        
    //控制小圆圈     
    cicle--;       
    if(cicle < 0){      
        cicle = ol.children.length-1;     
    }        
    for(var i=0;i<ol.children.length;i++){       
        ol.children[i].className='';      
    }        
    ol.children[cicle].className = 'current';          
});

8. 自动播放轮播图

//添加一个定时器，自动播放，类似于点击了右侧按钮 
//使用手动调用右侧按钮点击事件 
arrow_r.click() 
var timer = setInterval(function(){         
    //手动调用点击事件         
    arrow_r.click();     
},2000); 
//鼠标经过focus停止定时器 
focus.addEventListener('mouseenter',function(){ 
    clearInterval(timer);       
    timer = null;//清除定时器变量 
});
//鼠标移开focus启动定时器 
focus.addEventListener('mouseleave',function(){        
    timer = setInterval(function(){  
    //手动调用点击事件          
    arrow_r.click();       
    },2000); 
});

9. 优化（节流）

//定义节流阀，flag = true,实现逻辑中断，最先动画效果照常，当第一次点击

//后完成动画效果后，立即将节流阀设置为false,禁止进入点击效果