javascript实现图片轮播效果(二)图片序列节点的控制实现_javascript技巧

《javascript实现图片轮播效果(二)图片序列节点的控制实现_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Javascript实现图片轮播效果（二）图片序列节点的控制实现推荐阅读：Jquery代码实现图片轮播效果（一）在上篇文章给大家介绍了Javascript实现图片轮播效果（一）让图片跳动起來,这里我们实现图片序列节点的跳转实现•在图片跳转的同时，我们一般需要知道他跳转的是哪个位置，这里就是图片序列节点需要跟图片一同显示•下面我们就直接作分析.在没讲正文之前先给人家展示效果图:在HTML,CSS代码结构中我们需要加入一个图片序列是否选中的样式#sliderollia.active{background-color:tt

2、ffffff;color:#ff0000;}JS代码中我们需要对上一篇文章的JS代码做一些改变和增加，这里首先要改变的是将跳转的代码做一次封装，封装到一个方法中，然后返冋setinterval的值.这个主要是为序列节点实现-些功能.然后在跳转代码中，改变相应的序列节点的样式,为了能够展示跳转的位置.//图片节点varslider=document.getElementByld（^slider^）;varimgul二slider.getElementsByTagName（〃ul〃）[0];varimglis二imgul

3、.getElementsByTagName（，zli，z）;varlcn二imglis・length;//图片序列节点varnumol=slider.getElementsByTagName(，zorz)[0];varnumlinks二numol.getElementsByTagMame；//共享序列varindex=0;〃图片跳转，图片跳转的同时,改变序列节点的跳转varjump=function(){returnsetinterval(function(){辻(index>二len){index二0;}〃图片跳转

4、imgul.style,left=-(800*index)+"px";〃改变序列节点样式:首先要清除所有的链接的样式，然后在激活对应的序列节点样式for(vari=0;i

5、hover下的图片展示这里序列节点的数目与图片的数目是相对应的，因此可以通过当前序列节点所在的位置來改变其他的状态.当鼠标离开序列节点后,应当让图片继续自动跳转.//増加序列节点的hover控制：1.hover后要禁止图片的跳转，显示在当前的图片上,这里就需要清除跳转2.hover离开后，在当前的图片上做图片的跳转for(vari=0;i

6、en;i++){numlinks[i].setAttribute("class","〃)；if(numlinks[i]二二二this){index二i;}imgul.style,left=-(800*index)+"px";numlinks[index].setAttribute(〃class〃，"active");}//outnumlinks[i].onmouseout二function(){jumpindex二jump();这样我们就完成了第二步的效果.到此木文的全部叙述也就给犬家介绍完了，希望对大家有所帮助。