Javascript实现图片轮播效果(一)让图片跳动起来_javascript技巧

1.图片跳动起来

2.图片序列控制的实现

3.前后按钮控制的实现

这篇文章来看图片按照间隔时间进行切换.

我们先把结构代码完成,这个我就不做详细的讲解了.先给大家展示下效果图：

代码如下:

好的,现在我们来通过JS控制图片的跳转.

首先我们需要找到图片所在的位置,这里我们是通过ul来进行布局的所以首先得找到UL下的LI的数目

接着让图片一张一张的展示,我们使用了视窗的模式,就是遮罩层的模式.#slider是一个视窗,ul是视窗外的景色,而ul得景色是横向排版的

然后就是让外面的景色显示为视窗的大小,也就是让每一张图片作为每一次的视窗景色,这里就是控制图片的大小要与视窗同等大小.

上面讲解的是一个概念,也就是布局的处理,下面我们JS的控制了,要实现图片间隔的显示不同.我们就需要用到JS的setInterval或者setTimeout.这里我们使用setInterval(因为这个用起来方便.)

每跳转一次,我们控制的是UL的position的left,这样就可以让ul下的景色,在每一次都是显示不一样,而这个left是根据视窗的宽度来决定,第一张left当然是-800 * 0 ,第二种就是 -800*1,第三种是-800*2...依次类推.那我们就可以得出下面的代码

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Javascript实现图片轮播效果(一)让图片跳动起来_javascript技巧

1.图片跳动起来；2.图片序列控制的实现。3.前后按钮控制的实现。这篇文章来看图片按照间隔时间进行切换。我们先把结构代码完成，这个我就不做详细的讲解了.先给大家展示下效果图。代码如下：好的，现在我们来通过JS控制图片的跳转。首先我们需要找到图片所在的位置，这里我们是通过ul来进行布局的所以首先得找到UL下的LI的数目。接着让图片一张一张的展示，我们使用了视窗的模式，就是遮罩层的模式.#slider是一个视窗，ul是视窗外的景色，而ul得景色是横向排版的。然后就是让外面的景色显示为视窗的大小，也就是让每一张图片作为每一次的视窗景色，这里就是控制图片的大小要与视窗同等大小。

推荐度：

点击下载本文 文档为doc格式