js图片自动轮播代码分享(js图片轮播)

前端技术 2023/09/04 JavaScript

1、利用图片width显示位置来播放图片，技术：.offsetWidth 、aBtn[i].index = i 、setInterval() 、oUl[0].style.left =  、onclick()
2、利用数组放入图片经行轮播，技术：setInterval()。没有onclick()

图片轮播12js.html

复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
   \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\" xml:lang=\"en\">
 <head>
  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />
  <title>images slide</title>
 <style type=\"text/css\">
  * {
   margin: 0px;
   padding: 0px;
  }
  li {
   list-style: none;
  }
  img {
   border: 0;
  }
  a {
   text-decoration: none;
  }
  #slide {
   width: 800px;
   height: 400px;
   box-shadow: 0px 0px 5px #c1c1c1;
   margin: 20px auto;
   position: relative;
   overflow: hidden;
  }
  #slide ul {
   position: absolute;
   left: 0px;
   top: 0px;
   height: 400px;
   width: 11930px;
  }
  #slide ul li {
   width: 800px;
   height: 400px;
   overflow: hidden;
   float: left;
  }
  #slide .ico {
   width: 800px;
   height: 20px;
   overflow: hidden;
   text-align: center;
   position: absolute;
   left: 0px;
   bottom: 10px;
   z-index: 1;
  }
  #slide .ico a {
   display: inline-block;
   width: 10px;
   height:10px;
   background: url(out.png) no-repeat 0px 0px;
   margin: 0px 5px;
  }
  #slide .ico .active {
   background: url(out1.png) no-repeat 0px 0px;
  }
  #btnLeft {
   width: 60px;
   height: 400px;
   left: 0px;
   top: 0px;
   background: url() no-repeat 0px 0px;
   position: absolute;
   z-index: 2;
  }
  #btnLeft :hover {
   background: url() no-repeat 0px 0px;
  }
  #btnRight {
   width: 60px;
   height: 400px;
   right: 0px;
   top: 0px;
   background: url() no-repeat 0px 0px;
   position: absolute;
   z-index: 2;
  }
  #btnRight :hover {
   background: url() no-repeat 0px 0px;
  }  

 </style>

 <script type=\"text/javascript\">
  window.onload = function() {
   var oIco = document.getElementById(\"ico\");
   var aBtn = oIco.getElementsByTagName(\"a\");
   var oSlide = document.getElementById(\"slide\");
   var oUl = oSlide.getElementsByTagName(\"ul\");
   var aLi = oUl[0].getElementsByTagName(\"li\");
   var oBtnLeft = document.getElementById(\"btnLeft\");
   var oBtnRight = document.getElementById(\"btnRight\");

   var baseWidth = aLi[0].offsetWidth;
   //alert(baseWidth);
   oUl[0].style.width = baseWidth * aLi.length + \"px\";
   var iNow = 0;
   for(var i=0;i<aBtn.length;i++) { 
    aBtn[i].index = i;
    aBtn[i].onclick = function() {
     //alert(this.index);
     //alert(oUl[0].style.left);
     move(this.index);
     //aIco[this.index].className = \"active\";
    }
   }
   oBtnLeft.onclick = function() {
    iNow ++;
    //document.title = iNow;
    move(iNow);
   }
   oBtnRight.onclick = function() {
    iNow --;
    document.title = iNow;
    move(iNow);
   }

   var curIndex = 0;
   var timeInterval = 1000;
   setInterval(change,timeInterval);
   function change() {
    if(curIndex == aBtn.length) {
     curIndex =0;   
    } else {
     move(curIndex);
     curIndex += 1;
    }

   }

   function move(index) {
    //document.title = index;
    if(index>aLi.length-1) {
     index = 0;
     iNow = index;
    }
    if(index<0) {
     index = aLi.length - 1;
     iNow = index;
    }
    for(var n=0;n<aBtn.length;n++) {
     aBtn[n].className = \"\"; 
    }
    aBtn[index].className = \"active\";
    oUl[0].style.left = -index * baseWidth + \"px\";
    //buffer(oUl[0],{
    // left: -index * baseWidth
    // },8)

   }
  }
  </script>
  </head>
<body>
 <div id=\"slide\">
  <a id=\"btnLeft\" href=\"javascript:void(0);\" ></a>
  <a id=\"btnRight\" href=\"javascript:void(0);\" ></a>
  <!--when change next image:style=\"left: -(n-1)*800px;\"-->
  <ul>
   <li><img src=\"1.jpg\" alt=\"\" /></li>
   <li><img src=\"2.jpg\" alt=\"\" /></li>
   <li><img src=\"3.jpg\" alt=\"\" /></li>
   <li><img src=\"4.jpg\" alt=\"\" /></li>
   <li><img src=\"5.jpg\" alt=\"\" /></li>
   <li><img src=\"6.jpg\" alt=\"\" /></li>
  </ul>
  <div id=\"ico\" class=\"ico\"> 
   <a class=\"active\" href=\"javascript:void(0);\"></a>
   <a href=\"javascript:void(0);\"></a>
   <a href=\"javascript:void(0);\"></a>
   <a href=\"javascript:void(0);\"></a>
   <a href=\"javascript:void(0);\"></a>
   <a href=\"javascript:void(0);\"></a>
  </div>
 </div>
</body>
</html>

本文地址：https://www.stayed.cn/item/10918

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案