問題描述

(function(){ var timer = null;hSlider(); function hSlider() { // 通過數組來控制slider內容切換var imgadr = [’images/banner_2.jpg’, ’images/banner_3.jpg’, ’images/banner_1.jpg’], headArray = [’Second Heading’, ’Third Heading’,’First Heading’], paraArray = [’First paragraph is awesome!’, ’Second paragraph goes here!’, ’Third paragraph for you’ ], slider = document.getElementById(’slider’), next = document.getElementById(’prev’), prev = document.getElementById(’next’), iNow = i = 0; // 獲取slider作為畫布,再通過改變數組來修改背景,標題和段落function _bg(iNow) { slider.style.background = 'url(’' + imgadr[i] + '’) no-repeat center /cover'; document.getElementById(’sliderHeader’).innerHTML = headArray[i]; document.getElementById(’sliderPara’).innerHTML = paraArray[i];} // 自動循環timer = setInterval(function() { _bg(iNow); // 定時器每調動一次,自加一實現切換效果 i++; if (i == imgadr.length) i = 0; }, 3500); // 上一頁prev.onclick = function() { _bg(iNow); clearInterval(timer); i--; if (i == -1) i = imgadr.length - 1;} // 下一頁next.onclick = function() { _bg(iNow); clearInterval(timer); i++; if (i == imgadr.length) i = 0; // setInterval(timer); 沒有效果} }}

起因最近要實現一個全屏輪播圖的功能,然后查詢很多資料,也參考了很多的網站的代碼,然后發現大多都是混淆過了的代碼..看不太懂.然后自己造了個原生簡陋的輪播圖..由于js基礎不扎實肯定有很多問題,希望dalao們能指出我錯誤 原理是把slider當畫布,可以通過數組來控制切換背景和段落文字,設置定時器循環,每次循環數組i++起輪播的作用,控制器點擊后' i++' 或者 'i--' 控制上下頁.點擊的時候我想清除點定時器,然后執行自加一翻頁的效果,再添加回定時器. 那么問題來了我將定時器是儲存到了一個變量中,那我該如何的再次調用他? 也可以放進一個函數里再調用 但感覺會不會不太好..?

問題解答

像這種我覺得setTimeout比setInterval更好控制：

var timer;function loop(){ timer = setTimeout(function() {_bg(iNow); // 定時器每調動一次,自加一實現切換效果 i++; if (i == imgadr.length) i = 0; loop(); }, 3500)}//清理的話只要clearTimeout(timer)就行了，然后重新調用loop