Web前端：javascript实现图片轮播

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

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

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

?

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

<script type= "text/javascript" > //自动换图     var z=1; //设置为每三秒切换一次     var iInterval=setInterval( "autoChange(obj)" ,3000);     function autoChange(obj){          z++; //因为只有6张背景图片，所以每当计数到7，即返回初始状态          if (z==7){z=1;}           var oDiv = document.getElementById(obj);      var oImg= "url(img/ad" +z+ ".jpg)" ;      oDiv.style.background=oImg; }     </script>

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

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

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

?

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

<!--CSS样式--> < 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的设置--> < 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

<script type= "text/javascript" > var i=0; var moveInterval=setInterval(movecenteradleft,10);    //滑动切换的函数 function movecenteradleft(){    i++;    var oDiv=document.getElementById( "img" );    oDiv.style.left=parseInt(oDiv.style.left)-50+ "px" ;       if (parseInt(oDiv.style.left)<=-3600){                   oDiv.style.left= "0px" ;       }    }   </script>

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

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