一個簡易的js圖片輪播效果

更新時間：2017年07月22日 09:03:56 作者：mercuryTan

這篇文章主要為大家詳細(xì)介紹了一個簡易的js圖片輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一個簡易的js圖片輪播效果，話不多說，代碼獻(xiàn)上.
只有img標(biāo)簽的html代碼，做測試用：

<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è)置定時器

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

由淺入深講解Javascript繼承機(jī)制與simple-inheritance源碼分析
Javascript語言對繼承實(shí)現(xiàn)的并不好，需要工程師自己去實(shí)現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧，對javascript繼承相關(guān)知識感興趣的朋友一起看看吧
2015-12-12
純js實(shí)現(xiàn)無縫滾動功能代碼實(shí)例
這篇文章主要介紹了純js實(shí)現(xiàn)無縫滾動功能代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-02-02
教你巧用?import.meta?實(shí)現(xiàn)熱更新的問題
import.meta?是一個給?JavaScript?模塊暴露特定上下文的元數(shù)據(jù)屬性的對象，它包含了這個模塊的信息，這篇文章主要介紹了巧用?import.meta?實(shí)現(xiàn)熱更新的問題,需要的朋友可以參考下
2022-04-04
讓你5分鐘掌握9個JavaScript小技巧
這篇文章是國外翻譯JavaScript小技巧，幾個不錯的知識點(diǎn)，方便學(xué)習(xí)js的朋友，感覺內(nèi)容非常不錯特分享一下,需要的朋友可以參考下
2018-06-06
深入理解JavaScript系列（27）：設(shè)計模式之建造者模式詳解
這篇文章主要介紹了深入理解JavaScript系列（27）：設(shè)計模式之建造者模式詳解,建造者模式可以將一個復(fù)雜對象的構(gòu)建與其表示相分離,使得同樣的構(gòu)建過程可以創(chuàng)建不同的表示,需要的朋友可以參考下
2015-03-03
javascript event在FF和IE的兼容傳參心得(絕對好用)
event在IE和FF不兼，下面為大家分享的是javascript event在FF和IE的兼容傳參心得,需要的朋友可以參考下
2014-07-07
JS小球拋物線軌跡運(yùn)動的兩種實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JS小球拋物線軌跡運(yùn)動的兩種實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)小球拋物線運(yùn)動的相關(guān)計算與圖形繪制操作技巧,需要的朋友可以參考下
2017-12-12
用js限制網(wǎng)頁只在微信瀏覽器中打開(或者只能手機(jī)端訪問)
這篇文章主要介紹了用js限制網(wǎng)頁只在微信瀏覽器中打開,很多電影站也是這么限制的，原因你懂的，需要的朋友可以參考下
2020-01-01
原生js實(shí)現(xiàn)商品放大鏡效果
本文主要分享了原生js實(shí)現(xiàn)商品放大鏡效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
微信小程序使用canvas繪制鐘表
這篇文章主要為大家詳細(xì)介紹了微信小程序使用canvas繪制鐘表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05