怎么使用js實(shí)現(xiàn)圖片輪播效果

發(fā)布時(shí)間：2021-06-29 09:29:59 來源：億速云閱讀：169 作者：小新欄目：web開發(fā)

這篇文章主要介紹怎么使用js實(shí)現(xiàn)圖片輪播效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

只有img標(biāo)簽的html代碼，做測(cè)試用：

<body> 
<img src="images/class1-1.jpg" id="img"> 
</body>

下面是js代碼:

var k=0;  //當(dāng)前的索引
var ss = new Array(); //數(shù)組，用來存放圖片
ss[0] = "images/class1-1.jpg";
ss[1] = "images/class1-2.jpg";
ss[2] = "images/class1-3.jpg";
ss[3] = "images/class1-4.jpg";
function scrollPic(){ 
  if(k>ss.length-1){ //如果當(dāng)前函數(shù)超過數(shù)組下標(biāo)的最大值，k=0
    k=0;
  }
  for(var i=0;i<ss.length;i++){ //遍歷數(shù)組
    if(i==k){ //如果當(dāng)前索引等于當(dāng)前數(shù)組下標(biāo)
              document.getElementById("img").src=ss[i]; //改變圖片路徑
      }
    }
    k++; //k++,執(zhí)行下一次操作
  }

setInterval("scrollPic()",1000); //設(shè)置定時(shí)器

以上是“怎么使用js實(shí)現(xiàn)圖片輪播效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

怎么使用js實(shí)現(xiàn)圖片輪播效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽