欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现自动图片轮播代码

程序员文章站 2022-09-30 10:03:10
本文实例为大家分享了轮播的具体代码,自动轮播,居中显示,供大家参考,具体内容如下 <...

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

<!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图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。