所以我正在尝试构建一个动画背景图像,它将循环显示一系列图像.
我们的想法是,当您单击页面上的任何导航元素时,循环将暂停.
单击主页按钮时,循环将再次启动(从当前图像).
这在它的当前状态下工作,但是在重新触发它时循环不是自动的,而是你必须按下每个淡入淡出/滑动/任何东西的主页按钮.
脚本如下：
$(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},"easeInOutExpo");
}
function stopSlider() {
clearInterval(IntID);
}
$(".topnav ul li a").click(stopSlider);
$("#home").click(startSlider);
});
如果有人能指出我正确的方向,我们将不胜感激！最好的问候,卡斯帕.
解决方法
这应该为你做.
var IntID = setTimer();
function setTimer(){
i = setInterval(startSlider,4000);
return i;
}
function stopSlider() {
clearInterval(IntID);
}
//Restart Timer
// Option 1 make a restartSlider function and call it
$("#home").click(restartSlider);
function restartSlider(){
IntID = setTimer();
}
//Option 2 create an anonymous function only for that click event.
$("#home").click(function(){
IntID = setTimer();
});
