js圖片自動輪播程式碼分享(js圖片輪播)_javascript技巧

1、利用圖片width顯示位置來播放圖片，技術：.offsetWidth 、aBtn[i].index = i 、setInterval() 、oUl[0].style.left =  、onclick()
2、利用陣列放入圖片經行輪播，技術：setInterval()。沒有onclick()

圖片輪播12js.html

複製程式碼 程式碼如下:

BR>   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict . dtd">

 
  
  影像投影片
 
  * {
   邊距：0px;
   填入：0px;
  }
  li {
邊框：0;
  }
  a {
   文字裝飾：無;
  }
  #slide {  }
  #slide {   邊距：20px 自動；
   位置：相對；
   溢出：隱藏；
  }
  #slide ul {
   位置：絕對；
   左：0px；
   上方：0px；
   高度：400px；
   寬度：11930px；
  )
   寬度：11930px；
約🎜>   高度： 400px；
   溢出：隱藏；
   浮動：左；
  }
  #slide .ico {
  ；
   文字對齊：居中；
   位置：絕對；
   左：0 像素；
   底部：10 像素； a {
   顯示：內聯塊；
   寬度：10px；
   高度：10px；
   背景：url(out.png) 無重複0px；
   背景：url(out.png) 無重複0px 0px ;
  }
  #slide .ico .active {
   背景：url(out1.png) 無重複0px 0px;
  } 高度: 400px;
   左: 0px;
   頂部: 0px;
   背景: url() 無重複0px 0px;<.>  #btnLeft :hover {
   背景: url() 無重複0px 0px;
  }
  #b2tn >   右: 0px;
   頂部: 0px;
   背景: url() 無重複0px 0px;
   .位置: 絕對;
  {
   背景: url() no-repeat 0px 0px;
  }  

 

 < ;script type="text/script...
   var oIco = document.getElementById("ico");
   var aBtn = oIco.getElementsByTagName("a" );
get 🎜> );
   var oUl = oSlide.getElementsByTagName("ul");
   var aLi = oUl[0].getElementsByTagName("li");
Le  
   var oBtnRight = document.getElementById("btnRight");

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

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

   }

   function move(index) {
    //document.title = index;
    if(index>aLi.length-1) {   if(index>aLi.length-1) {   if(index>aLi.length-1) {  🎜 >    }
    if(index     index = aLi.length - 1;
     iNow = index;     aBtn[n].className = ""; 
    }
    aBtn[index].className = "active";
    oUl[0].style.left = -index * baseWidth "px""
; {
    // 左：-index * baseWidth
    // },8)

   }
 ..身體>
 

  
  
  
  

   < ;li>
   
• 


   
• 


   
• 
  
    
   
     
     
     
     
      ;
     
     
    
  
   

圖片自動播放.html

複製程式碼

程式碼如下：

 ;
  >
  圖片標題>
 

 
 
 ;
  >