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


Posted in Javascript onFebruary 17, 2016

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

在上篇文章给大家介绍了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();
}
}

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

Javascript 相关文章推荐
javascript 面向对象 function类
May 13 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
Bootstrap中CSS的使用方法
Feb 17 #Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 #Javascript
基于javascript简单实现对身份证校验
Jan 25 #Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 #Javascript
Bootstrap布局组件应用实例讲解
Feb 17 #Javascript
深入php面向对象、模式与实践
Feb 16 #Javascript
三个js循环的关键字示例(for与while)
Feb 16 #Javascript
You might like
十天学会php之第六天
2006/10/09 PHP
请php正则走开
2008/03/15 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
一份python入门应该看的学习资料
2018/04/11 Python
关于Python的一些学习总结
2018/05/25 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
母亲节感恩活动记录
2014/03/16 职场文书
合同协议书格式
2014/04/18 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
岁月神偷观后感
2015/06/11 职场文书
八年级语文教学反思
2016/03/03 职场文书
如何书写授权委托书?
2019/06/25 职场文书