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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
JavaScript中while循环的基础使用教程
Aug 11 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
javascript中字符串的定义示例代码
2013/12/19 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
python静态方法实例
2015/01/14 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python 实现简单的电话本功能
2015/08/09 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python实现视频读取和转化图片
2019/12/10 Python
Python如何实现FTP功能
2020/05/28 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
办公设备采购方案
2014/03/16 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
关于公司年会的开幕词
2016/03/04 职场文书