快捷導(dǎo)航

一個(gè)簡(jiǎn)易的js圖片輪播效果

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

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

一個(gè)簡(jiǎn)易的js圖片輪播效果，話(huà)不多說(shuō)，代碼獻(xiàn)上.
只有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ù)組，用來(lái)存放圖片
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ù)超過(guò)數(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í)器

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

您可能感興趣的文章:

相關(guān)文章

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