一個(gè)簡(jiǎn)易的js圖片輪播效果
一個(gè)簡(jiǎn)易的js圖片輪播效果,話不多說,代碼獻(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ù)組,用來存放圖片 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í)器
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)圖片無(wú)縫循環(huán)輪播
- JS實(shí)現(xiàn)圖片輪播效果實(shí)例詳解【可自動(dòng)和手動(dòng)】
- JS實(shí)現(xiàn)分頁(yè)瀏覽橫向圖片(類輪播)實(shí)例代碼
- 實(shí)現(xiàn)圖片首尾平滑輪播(JS原生方法—節(jié)流)
- JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片輪播效果
- JS 實(shí)現(xiàn)banner圖片輪播效果(鼠標(biāo)事件)
- 利用vueJs實(shí)現(xiàn)圖片輪播實(shí)例代碼
- JS組件庫(kù)AlloyTouch實(shí)現(xiàn)圖片輪播過程解析
相關(guān)文章
全面理解面向?qū)ο蟮?JavaScript(來自ibm)
要掌握好?JavaScript,首先一點(diǎn)是必須摒棄一些其他高級(jí)語(yǔ)言如?Java、C#?等類式面向?qū)ο笏季S的干擾,全面地從函數(shù)式語(yǔ)言的角度理解?JavaScript?原型式面向?qū)ο蟮奶攸c(diǎn)2013-11-11詳解JS鼠標(biāo)事件中clientX/screenX/offsetX/pageX屬性的區(qū)別
在熟悉業(yè)務(wù)中播放器功能的時(shí)候,發(fā)現(xiàn)時(shí)間軸上綁定了點(diǎn)擊和拖動(dòng)事件,頻繁遇到了類似pageX之類的事件屬性,所以本文就來和大家詳細(xì)聊聊clientX/screenX/offsetX/pageX等屬性的區(qū)別吧2024-03-03一個(gè)級(jí)聯(lián)菜單代碼學(xué)習(xí)及removeClass與addClass的應(yīng)用
最近在學(xué)些web前段的知識(shí),看見博客園首頁(yè)左側(cè)的一個(gè)級(jí)聯(lián)菜單,很是好奇,于是想自己實(shí)現(xiàn)以下,代碼書寫很簡(jiǎn)潔而且易懂,感興趣的朋友可以了解下,希望本文對(duì)你學(xué)習(xí)級(jí)聯(lián)菜單有所幫助2013-01-01JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
這篇文章主要介紹了JavaScript繼承基礎(chǔ)講解,原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承,需要的朋友可以參考下2014-08-08解決layui 復(fù)選框等內(nèi)置控件不顯示的問題
今天小編就為大家分享一篇解決layui 復(fù)選框等內(nèi)置控件不顯示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08