学习记录：简单的焦点图轮播效果

这次学习的是慕课网的视频教程Tab选项卡切换效果，视频教的是Tab选项卡切换效果，作业写的是焦点图轮播效果，这两者基本原理是一样的。
实现效果描述：随着鼠标滑过相对应标签，对应的内容也进行切换，鼠标移开后，内容会进行自动切换展示。
首先写html，把展示内容用列表标签进行装载，图片和相对应的文字分别装在列表中，写好基本的CSS样式。

  

    

      
![](images/54111cd9000174cd04900170.jpg)
      
![](images/54111dac000118af04900170.jpg)
      
![](images/54111d9c0001998204900170.jpg)
      
![](images/54111d8a0001f41704900170.jpg)
      
![](images/54111d7d00018ba604900170.jpg)
    
    
    

      
1
      
2
      
3
      
4
      
5
    
  

无论是TAB标签还是焦点图轮播实现原理就是先设置活动类样式和普通类样式，然后编写事件函数，当事件发生时对元素使用活动类样式，否则就使用普通类样式，在这个焦点图例子里，图片的切换使用了直接用脚本添加样式的方式进行设置，而文字的切换使用脚本调动样式表的方式进行设置，具体例子为：

// 对元素添加类达到控制显示
lilist[i].className="";
lilist[i].className = "on";
//直接对元素的样式属性display进行设置控制显示
liimg[i].style.display="none";
liimg[i].style.display = "block";

整个切换函数的原理是把除了目标之外的其它同类隐藏，然后单独对目标进行设置使之显示：

function change(crindex){
    for(var i=0;i

在切换过程中的重点是索引的关联和传递，图片列表中的项目和文字列表中的项目是一一按顺序对应的。
手动切换效果达到后，开始进行自动切换的编写，主要是用到setInterval()函数，先自定义一个播放函数，然后用setInterval()函数每隔2秒运行，并且当列表历遍完后会重头开始历遍。

function autoplay(){ 
    index++;       
    if(index>=lilist.length){
        index=0;
        }
    change(index);
    }
timer = setInterval(autoplay,2000)

接着实现当鼠标滑过整个内容时停止自动播放，鼠标离开整个容器时继续播放下一张，这里重点是在上面的播放函数中一开始就让全局索引数自加1，另外还要在切换函数最后将当前切换的索引值传递给全局索引，这样每次运行播放函数时就会从下一张开始。

divwrap.onmouseover = function(){
    clearInterval(timer);
    }
divwrap.onmouseout = function(){
    timer = setInterval(autoplay,2000)
    }

至此一个简单的焦点图轮播效果就写完了，另外还可以对其添加其它扩展比如鼠标点击才切换或者添加切换动画，可以多种组合灵活使用。