Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016-02-17 00:00
846 查看
推荐阅读:Jquery代码实现图片轮播效果(一)
在上篇文章给大家介绍了Javascript实现图片轮播效果(一)让图片跳动起来,这里我们实现图片序列节点的跳转实现.在图片跳转的同时,我们一般需要知道他跳转的是哪个位置,这里就是图片序列节点需要跟图片一同显示.下面我们就直接作分析.
在没讲正文之前先给大家展示效果图:
在HTML,CSS代码结构中我们需要加入一个图片序列是否选中的样式
JS代码中我们需要对上一篇文章的JS代码做一些改变和增加,这里首先要改变的是将跳转的代码做一次封装,封装到一个方法中,然后返回setInterval的值.这个主要是为序列节点实现一些功能.
然后在跳转代码中,改变相应的序列节点的样式,为了能够展示跳转的位置.
这里还需要加入序列节点的hover状态下的控制.
hover后图片跳转应该停止,应停留在hover下的图片展示这里序列节点的数目与图片的数目是相对应的,因此可以通过当前序列节点所在的位置来改变其他的状态.
当鼠标离开序列节点后,应当让图片继续自动跳转.
这样我们就完成了第二步的效果.到此本文的全部叙述也就给大家介绍完了,希望对大家有所帮助。
原生javascript实现图片轮播效果代码
JS简单的轮播的图片滚动实例
带左右箭头图片轮播的JS代码
简单的js图片轮换代码(js图片轮播)
js图片自动轮播代码分享(js图片轮播)
JS实现简易图片轮播效果的方法
原生js和jquery实现图片轮播特效
js图片轮播手动切换效果
Javascript实现图片轮播效果(一)让图片跳动起来
Javascript实现图片轮播效果(二)图片序列节点的控制实现
在上篇文章给大家介绍了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(); } }
这样我们就完成了第二步的效果.到此本文的全部叙述也就给大家介绍完了,希望对大家有所帮助。
您可能感兴趣的文章:
js 图片轮播(5张图片)原生javascript实现图片轮播效果代码
JS简单的轮播的图片滚动实例
带左右箭头图片轮播的JS代码
简单的js图片轮换代码(js图片轮播)
js图片自动轮播代码分享(js图片轮播)
JS实现简易图片轮播效果的方法
原生js和jquery实现图片轮播特效
js图片轮播手动切换效果
Javascript实现图片轮播效果(一)让图片跳动起来
Javascript实现图片轮播效果(二)图片序列节点的控制实现
相关文章推荐
- JavaScript学习总结(十七)——Javascript原型链的原理
- JavaScript学习总结(八)——JavaScript数组
- JavaScript中0和""的比较问题
- JSP取得绝对路径
- JavaScript学习总结(十三)——极简主义法编写JavaScript类
- JavaScript学习总结(七)——JavaScript函数(function)
- JavaScript学习总结(十四)——JavaScript编写类的扩展方法
- Javascript 面向对象编程(一):封装(转载)
- 使用js加载器动态加载外部Javascript文件
- MyEclipse使用总结——修改MyEclipse默认的Servlet和jsp代码模板
- javascript处理HTML的Encode(转码)和Decode(解码)总结
- JavaScript学习总结(十五)——Function类
- JavaScript学习总结(十二)——JavaScript编写类
- JavaScript屏蔽Backspace键
- JavaScript学习总结(五)——Javascript中==和===的区别
- JavaScript学习总结(四)——逻辑OR运算符详解
- JavaScript获取浏览器类型与版本
- 解决IE8内核 js数组没有indexOf 方法
- Javascript模块化编程(三):require.js的用法
- Javascript模块化编程(二):AMD规范