你的位置:首页 > 软件开发 > Java > js 基础篇(点击事件轮播图的实现)

js 基础篇(点击事件轮播图的实现)

发布时间:2016-08-19 21:00:07
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现。但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法:1、利用位移的方法来实现  首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例 ...

轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现。但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法:

1、利用位移的方法来实现

  首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说。将图片放入到div 中。

  其次,样式部分将img标签全部设置成absolute;以方便定位

  最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图片和等待进入的图片,第二个数组保存其余的n张图片,假设这两个数组分别设置为:waitToShow=[]; 和 goOut=[];   waitToShow.shift();弹出第一张图片假如命名为showFirst,并为showFirst图片设置位移和移动时间,执行完成之后showFirst放入goOut尾部:goOut.push(showFirst);  这时waitToShow数组的第0个元素就变成原来的第二张要显示的图片,给这个图片waitToShow[0]设置位移和移动时间,并且将goOut数组的首元素图片弹出来,在放进waitToShow数组的尾部,保证waitToShow数组永远是一张显示的图片和待显示的图片,这样就通过两个数组形成了一个循环来完成轮播图的实现。反向的逻辑是一样的(由于逻辑过于复杂这里不推荐)

2、利用层级的高低来使最顶部图片变化的做法(这个做法没有位移的动作,但是逻辑却非常简便,很实用)

  直接来代码更直观点:基本每行都有注释

<!DOCTYPE html>

原标题:js 基础篇(点击事件轮播图的实现)

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。