當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

原生Js_使用setInterval() 方法实现图片轮播功能

發布時間：2024/10/12 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了原生Js_使用setInterval() 方法实现图片轮播功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　用javascript圖片輪播功能

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>圖片輪播</title><style>#swaper{width: 520px;margin: 0 auto;}#number{position: relative;top: -30px; right: -320px; }label{width: 10px;height: 10px;background-color: yellow;margin: 2px;}.active{width: 10px;height: 10px;border: 1px solid black;background-color: red;}</style><script>//此處編寫代碼，實現圖片輪播功能</script></head><body><div id="swaper"><img src="img/pic01.jpg" width="512px" id="img"><div id="number"><label id="l1" class="active"> 1 </label><label id="l2"> 2 </label><label id="l3"> 3 </label><label id="l4"> 4 </label><label id="l5"> 5 </label><label id="l6"> 6 </label></div></div></body> </html>

　　(第4和第5張圖片是一樣的，最下方有看鼠標點擊時控制臺輸出的信息)?

實現過程

　　Window setInterval() 方法　　傳送門

　　setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式

　　setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數

　　(如果只想執行一次可以使用 setTimeout() 方法)

　　clearTimeout() 方法可取消由 setTimeout() 方法設置的定時操作。

　　clearTimeout() 方法的參數必須是由 setTimeout() 返回的 ID 值。

　　(要使用 clearTimeout() 方法, 在創建執行定時操作時要使用全局變量)

　　t作為setInterval() 返回的 ID 值并且要使用clearTimeout()，開全局變量

//作為輪播圖片下標簽var n =0;//由 setInterval() 返回的 ID 值var t =0;

　　播放圖片方法

　　鼠標放置到下標上時

　　labels[i].onmouseover = function(){//停止計時器 clearTimeout(t);//顯示當前標簽表示的圖片var b = this.innerText*1;img.src = 'img/pic0'+b+'.jpg';//制空所有圖片的stylefor(var i=0;i<labels.length;i++){labels[i].className=''; }//將當前標簽顯示為紅色this.className = 'active'}

　　鼠標離開下標時，重新開始計時器

labels[i].οnmοuseοut=function(){//得到計數器文本下標,返回值是string類型n=this.innerText*1;//重新開始計時器t=setTimeout(GaryShowPic,1000);}

JavaScript中innerText和innerHTML的區別　　傳送門

innerText返回或者設置DOM元素的文本

innerHTML 返回或者設置DOM元素的子元素

返回元素上：　　忽略和不忽略Html標簽的區別

innerHTML:

　　從對象的起始位置到終止位置的全部內容,包括Html標簽

innerText:

　　從起始位置到終止位置的內容, 但它去除Html標簽?

=================================分割線

使用console.log()在控制臺中查看輸出信息

　　在鼠標觸碰事件中添加 console.log("鼠標觸碰到的下標值為"+b) 查看鼠標觸碰到的數值

//鼠標觸碰到標簽上時labels[i].onmouseover = function(){//停止計時器 clearTimeout(t);//顯示當前標簽表示的圖片var b = this.innerText*1;
console.log("鼠標觸碰到的下標值為"+b);
img.src = 'img/pic0'+b+'.jpg';//制空所有圖片的stylefor(var i=0;i<labels.length;i++){labels[i].className=''; }//將當前標簽顯示為紅色this.className = 'active'}

　　在GaryShowPic()中添加 console.log(labels[n-1]) 查看所顯示標簽的信息

　　console.log("鼠標觸碰到的下標值為"+b)調試臺輸出的值是我們想要的

　　console.log(labels[n-1])輸出來的值就是下面body中的值

?　　可以看到，實現的輪播圖改變的只是所指向的label id 標簽值的class="active"

轉載于:https://www.cnblogs.com/1138720556Gary/p/9743344.html

總結

以上是生活随笔為你收集整理的原生Js_使用setInterval() 方法实现图片轮播功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。