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();
}
}

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

赞 (0)

相关推荐

  • 基于cssSlidy.js插件实现响应式手机图片轮播效果

    基于cssSlidy.js插件实现响应式手机图片轮播效果

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-cap

  • 详解js图片轮播效果实现原理

    本文实例讲述了js图片轮播效果实现原理,分享给大家供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="tex

  • js图片轮播效果实现代码

    js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给

  • js带点自动图片轮播幻灯片特效代码分享

    js带点自动图片轮播幻灯片特效代码分享

    本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link rel="stylesheet" href="css/zzsc.css&qu

  • JS仿hao123导航页面图片轮播效果

    hao123网站大家都很熟悉吧,具体的效果不用我多说吧,感兴趣的朋友可以去参考效果图,下面小编给大家分享下实现代码思路,当然大家可以根据需求适当的添加修改删除代码. 关键代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ wi

  • 轻松实现javascript图片轮播特效

    轻松实现javascript图片轮播特效

    本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 <body> <div class="dota"> <ul id="content"> <li><a href="#"><img src="images/1.jpg"/></a>&l

  • Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）

    在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car

  • 图解js图片轮播效果

    图解js图片轮播效果

    本文实例讲解了js图片轮播效果的实现原理,分享给大家供大家参考,具体内容如下 两种图片轮播实现方案,先来看效果对比: 方案一: 原理:将图片摆成一行,从左到右依次滚动进入视野,当滚动到最后一张时,从右到左滚动回到第一张.这么做的缺点是,滚动到最后一张时,会有一个反向,导致整个滚动过程不连贯. 方案二: 实现原理示意图 原理: 1.轮播过程中,有几个关键元素:一个舞台(绿框).候场区(黑框).排队区(红框)和两个数组A和B.A用来保存正在展示和下一个将要展示的图片,如:图片1.2:B用来保存排队等

  • 最简单的JavaScript图片轮播代码(两种方法)

    最简单的JavaScript图片轮播代码(两种方法)

    通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: non

  • 基于javascript实现样式清新图片轮播特效

    基于javascript实现样式清新图片轮播特效

    本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下 一.实现效果 如上图: 1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 2.鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片:鼠标移开后图片继续轮换 3.鼠标移到小图标上时,大图片区域会显示对应的大图:鼠标移开则从当前图片开始继续轮换 二.代码 <!DOCTYPE html> <html> <head lang="en"&g

  • 原生JS实现旋转木马式图片轮播插件

    原生JS实现旋转木马式图片轮播插件

    本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果 由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看

  • 用JS实现图片轮播效果代码（一）

    用JS实现图片轮播效果代码（一）

    一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content"> <!-- 总的父

  • js图片轮播手动切换效果

    js图片轮播手动切换效果

    利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot

随机推荐