所以我试图建立一个生动活泼的背景图像通过该图像阵列将循环。
这个想法也是,当你点击页面上的任何导航元素,周期将暂停。
当你点击home键,周期再次启动(从当前图像)。
这部作品在它的当前状态,但是周期是不是自动在重新着火了,相反,你必须按home键每个淡出/滑动/不管。
该脚本如下:
$(document).ready(function(){
var imgArr = new Array(
'img/slides/slide1.jpg',
'img/slides/slide2.jpg',
'img/slides/slide3.jpg');
var preloadArr = new Array();
var i;
// Preload
for(i=0; i < imgArr.length; i++){
preloadArr[i] = new Image();
preloadArr[i].src = imgArr[i];
}
var currImg = 1;
var IntID = setInterval(startSlider, 4000);
// Image Rotator
function startSlider(){
$('.mainbg').animate({opacity: 0}, 1200, "easeInOutExpo", function(){
$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src + ') no-repeat center center fixed');
$(this).css({'background-size': 'cover' , '-webkit-background-size': 'cover' , '-moz-background-size': 'cover' , '-o-background-size': 'cover' ,});
}).animate({opacity: 1}, 1200, "easeInOutExpo");
}
function stopSlider() {
clearInterval(IntID);
}
$(".topnav ul li a").click(stopSlider);
$("#home").click(startSlider);
});
如果有人能请点我在这个正确的方向,它会不胜感激! 最好的问候,卡斯帕。