Web前端：javascript实现图片轮播

前言：昨天深夜写到结尾，手贱按到ESC，顿时灰飞烟灭，在此申请OSchina开通自动保存草稿功能！图片轮播常见于电商网站及公司形象页面的展示，多为多幅大体积图片的变换，效果大致分为两种：一种是背景图片的替换，另一种是带一定滑动动作的切换。下面就这两种方式分别阐述。

一，利用背景图片的替换实现图片轮播

因为这个功能在任何的元素中都能实现，所以省略掉CSS布局部分，直接上javascript代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<code>"text/javascript"</code> <code>></code> </div> <div class="line number2 index1 alt1"> <code>//自动换图</code> </div> <div class="line number3 index2 alt2"> <code> </code> <code>var</code> <code>z=1;</code> </div> <div class="line number4 index3 alt1"> <code>//设置为每三秒切换一次</code> </div> <div class="line number5 index4 alt2"> <code> </code> <code>var</code> <code>iInterval=setInterval(</code> <code>"autoChange(obj)"</code> <code>,3000);</code> </div> <div class="line number6 index5 alt1"> <code> </code> <code>function</code> <code>autoChange(obj){</code> </div> <div class="line number7 index6 alt2"> <code> </code> <code>z++;</code> </div> <div class="line number8 index7 alt1"> <code>//因为只有6张背景图片，所以每当计数到7，即返回初始状态</code> </div> <div class="line number9 index8 alt2"> <code> </code> <code>if</code> <code>(z==7){z=1;}</code> </div> <div class="line number10 index9 alt1"> <code> </code> <code>var</code> <code>oDiv = document.getElementById(obj);</code> </div> <div class="line number11 index10 alt2"> <code> </code> <code>var</code> <code>oImg=</code> <code>"url(img/ad"</code> <code>+z+</code> <code>".jpg)"</code> <code>;</code> </div> <div class="line number12 index11 alt1"> <code> </code> <code>oDiv.style.background=oImg;</code> </div> <div class="line number13 index12 alt2"> <code>}</code> </div> <div class="line number14 index13 alt1"> </div> <div class="line number15 index14 alt2"> <code> </code> <code>

这个效果唯一需要注意的就是作为背景的图片按一定顺序编号，可以减少很多判断。

二，带一定滑动动作的切换实现图片轮播

这一种方法和上面一种比起来，带有一定的特效，视觉效果肯定是强一些的，但是需要单独设置CSS样式，把大的DIV嵌套在小的DIV里面，听起来可能不太明白，上一串CSS代码先：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

< style type = "text/css" > li{list-style-type:none;float:left} #showimg{width:600px;height:160px;position:relative;left:0;overflow:hidden} #img{width:3600px;height:160px;position:absolute;left:0} style > < div id = "showimg" > < div id = "img" > < ul > < li >< img src = "img/img1.jpg" alt = "ad" /> li > < li >< img src = "img/img2.jpg" alt = "ad" /> li > < li >< img src = "img/img3.jpg" alt = "ad" /> li > < li >< img src = "img/img4.jpg" alt = "ad" /> li > < li >< img src = "img/img5.jpg" alt = "ad" /> li > < li >< img src = "img/img6.jpg" alt = "ad" /> li > ul > div > div >

看完布局之后我们就能发现，实际上是用一个较小的DIV遮挡在大的DIV上面，作为显示区域。下面贴出Javascript代码，作为滑动切换的展示：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<code>"text/javascript"</code> <code>></code> </div> <div class="line number2 index1 alt1"> <code>var</code> <code>i=0;</code> </div> <div class="line number3 index2 alt2"> <code>var</code> <code>moveInterval=setInterval(movecenteradleft,10);</code> </div> <div class="line number4 index3 alt1"> <code> </code> <code>//滑动切换的函数</code> </div> <div class="line number5 index4 alt2"> <code>function</code> <code>movecenteradleft(){</code> </div> <div class="line number6 index5 alt1"> <code> </code> <code>i++;</code> </div> <div class="line number7 index6 alt2"> <code> </code> <code>var</code> <code>oDiv=document.getElementById(</code> <code>"img"</code> <code>);</code> </div> <div class="line number8 index7 alt1"> <code> </code> <code>oDiv.style.left=parseInt(oDiv.style.left)-50+</code> <code>"px"</code> <code>;</code> </div> <div class="line number9 index8 alt2"> <code> </code> <code>if</code> <code>(parseInt(oDiv.style.left)<=-3600){</code> </div> <div class="line number10 index9 alt1"> <code> </code> <code>oDiv.style.left=</code> <code>"0px"</code> <code>;</code> </div> <div class="line number11 index10 alt2"> <code> </code> <code>}</code> </div> <div class="line number12 index11 alt1"> <code> </code> <code>}</code> </div> <div class="line number13 index12 alt2"> </div> <div class="line number14 index13 alt1"> <code>

 提示：图片的轮播会单独开启一个无法停止的线程，过多的使用会影响浏览的性能。因此建议在单个页面不要开启多个自动轮播。

转载于:https://my.oschina.net/u/2449240/blog/504031