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

WBOY
Release: 2016-05-16 15:15:25
Original
1129 people have browsed it

推荐阅读:Jquery代码实现图片轮播效果(一)

在上篇文章给大家介绍了Javascript实现图片轮播效果(一)让图片跳动起来,这里我们实现图片序列节点的跳转实现.在图片跳转的同时,我们一般需要知道他跳转的是哪个位置,这里就是图片序列节点需要跟图片一同显示.下面我们就直接作分析.

在没讲正文之前先给大家展示效果图:

在HTML,CSS代码结构中我们需要加入一个图片序列是否选中的样式

#slider ol li a.active{ background-color: #ffffff; color: #ff0000; }
Copy after login

JS代码中我们需要对上一篇文章的JS代码做一些改变和增加,这里首先要改变的是将跳转的代码做一次封装,封装到一个方法中,然后返回setInterval的值.这个主要是为序列节点实现一些功能.

然后在跳转代码中,改变相应的序列节点的样式,为了能够展示跳转的位置.

//图片节点 var slider = document.getElementById("slider"); var imgul = slider.getElementsByTagName("ul")[0]; var imglis = imgul.getElementsByTagName("li"); var len = imglis.length; //图片序列节点 var numol = slider.getElementsByTagName("ol")[0]; var numlinks = numol.getElementsByTagName("a"); //共享序列 var index = 0; //图片跳转,图片跳转的同时,改变序列节点的跳转 var jump = function () { return setInterval(function(){ if(index >= len){ index = 0; } //图片跳转 imgul.style.left = - (800 * index) + "px"; //改变序列节点样式:首先要清除所有的链接的样式,然后在激活对应的序列节点样式 for (var i = 0; i < len; i++) { numlinks[i].setAttribute("class",""); } numlinks[index].setAttribute("class","active"); index++; },2000); }; var jumpindex = jump();
Copy after login

这里还需要加入序列节点的hover状态下的控制.

hover后图片跳转应该停止,应停留在hover下的图片展示这里序列节点的数目与图片的数目是相对应的,因此可以通过当前序列节点所在的位置来改变其他的状态.

当鼠标离开序列节点后,应当让图片继续自动跳转.

//增加序列节点的hover控制: 1. hover后要禁止图片的跳转,显示在当前的图片上,这里就需要清除跳转 2.hover离开后,在当前的图片上做图片的跳转 for (var i = 0; i < len; i++){ //hover numlinks[i].onmouseover = function () { clearInterval(jumpindex); for (var i = 0; i < len; i++) { numlinks[i].setAttribute("class",""); if (numlinks[i] === this){ index = i; } } imgul.style.left = - (800 * index) + "px"; numlinks[index].setAttribute("class","active"); } //out numlinks[i].onmouseout = function(){ jumpindex = jump(); } }
Copy after login

这样我们就完成了第二步的效果.到此本文的全部叙述也就给大家介绍完了,希望对大家有所帮助。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!