这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 Javascript 实现图片轮播效果 (二) 图片序列节点的控制实现的相关资料, 需要的朋友可以参考下
推荐阅读:Jquery 代码实现图片轮播效果(一)
在上篇文章给大家介绍了 Javascript 实现图片轮播效果 (一) 让图片跳动起来, 这里我们实现图片序列节点的跳转实现. 在图片跳转的同时, 我们一般需要知道他跳转的是哪个位置, 这里就是图片序列节点需要跟图片一同显示. 下面我们就直接作分析.
在没讲正文之前先给大家展示效果图:
在 html,CSS 代码结构中我们需要加入一个图片序列是否选中的样式
- #slider ol li a.active{
- background-color: #ffffff;
- color: #ff0000;
- }
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();
这里还需要加入序列节点的 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();
- }
- }
这样我们就完成了第二步的效果. 到此本文的全部叙述也就给大家介绍完了,希望对大家有所帮助。
来源: http://www.phperz.com/article/17/0406/267120.html