Web前端：javascript实现图片轮播

2019独角兽企业重金招聘Python工程师标准>>>

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

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

<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代码先：

< 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上面，作为显示区域。下面贴出Javascript代码，作为滑动切换的展示：

<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/2460148/blog/510883