当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js实现自动图片轮播代码

js实现自动图片轮播代码

2019年03月20日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了轮播的具体代码，自动轮播，居中显示，供大家参考，具体内容如下

<!doctype html>
<html>
<head lang="en">
 <meta charset="utf-8">
 <title></title>
 <style>
  #div1{
   width: 192px;
   height: 120px;
   border: 1px solid gray;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
  }
  #div1 img{
   position: absolute;
  }
 </style>
</head>
<body>
<div id="div1">
 <img src="images/1.jpg" alt="" width="192"/>
 <img src="images/2.jpg" alt="" width="192"/>
 <img src="images/3.jpg" alt="" width="192"/>
 <img src="images/4.jpg" alt="" width="192"/>
</div>
<div id="div2">

</div>
<script>
 //获取页面元素
 var div1 = document.getelementbyid('div1');
 var div2 = document.getelementbyid('div2');
 var imgs = div1.getelementsbytagname('img');
 //初始化页面图片的位置
 window.onload=function(){
  for(var i=0; i<imgs.length; i++){
   imgs[i].style.left = i*192 +'px'
  }
 };
 //轮播移动的函数
 function imgmove(){
  var b1 = false;
  for(var i = 0; i < imgs.length; i++) {
   imgs[i].style.left = imgs[i].offsetleft-1 + 'px';
   if(imgs[i].offsetleft==0){
    b1=true;
    if(i==0)
    imgs[imgs.length-1].style='576px';
    else
    imgs[i-1].style.left='576px'
   }
  }
  if(!b1)
   settimeout(imgmove,20);
  else
   settimeout(imgmove,2000);
 }
 settimeout(imgmove,3000);
</script>
</body>
</html>

精彩专题分享：jquery图片轮播 javascript图片轮播 bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网