(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更好控制: