推荐阅读：Jquery代码实现照片轮播的效果(一)。

在上一篇文章中，我们介绍了Javascript实现图片旋转的效果。(1)让图片跳转，这里我们实现图片序列节点的跳转。图片跳转时，我们一般需要知道他跳转到哪个位置，这里图片序列节点需要和图片一起显示。下面我们直接分析一下。

在讲课文之前给你看一下效果图：

在HTML和CSS代码结构中，我们需要添加一个图片序列是否被选中的样式。

#滑块ol Li a . active { background-color : # ffffff；color: # ff0000}在js代码中，我们需要对上一篇文章的JS代码进行一些修改和补充。这里的第一个变化是将跳转代码封装一次，封装成一个方法，然后返回setInterval的值。这主要是为了实现序列节点的一些功能。

然后，在跳转代码中，更改相应序列节点的样式，以显示跳转位置。

//图片节点varslider=document . getelementbyid(' slider ')；var imgul=slider . getelementsbytagname(' ul ')[0]；var imglis=imgul . getelementsbytagname(' Li ')；var len=imglis.length//图片序列节点varn umol=slider . getelementsbytagname(' ol ')[0]；var numlink=nummol . getelementsbytagname(' a ')；//共享序列var索引=0；//图片跳转，当图片跳转时，改变序列节点的跳转var jump=function(){ return set interval(function(){ if(index=len){ index=0；}//图片跳转imgul . style . left=-(800 * index)' px '；//要更改序列节点样式：首先清除所有链接样式，然后为(var I=0；我透镜；I){ numlink[I]。setAttribute('class '，' ')；} numlink[index]。setAttribute('class '，' active ')；指数；},2000);};var jump index=jump()；在这里，我们还需要添加悬停状态下序列节点的控制。

悬停后，画面跳转应停止，画面显示应停留在悬停下方。这里，序列节点的数量对应于图片的数量，所以其他状态可以通过当前序列节点的位置来改变。

当鼠标离开序列节点时，图片应该会继续自动跳转。

//添加序列节点的悬停控件：1.悬停后，需要禁止画面跳转并在当前画面上显示。在这里，有必要清除跳转。2.悬停离开后，在当前图片上进行图片的跳转(var I=0；我透镜；I){//hover numlink[I]。onmouseover=function(){ clearInterval(jump index)；for(var I=0；我透镜；I){ numlink[I]。setAttribute('class '，' ')；if(numlink[I]===this){ index=I；} } imgul . style . left=-(800 * index)' px '；numlink[index]。setAttribute('class '，' active ')；}//out numlink[I]。onmouseout=function(){ jump index=jump()；}}那么我们已经完成了第二步的效果。到目前为止，这篇文章的所有叙述都已经介绍给大家了，希望对大家有所帮助。