小编Kas*_*wau的帖子

所以我正在尝试构建一个动画背景图像,它将循环显示一系列图像.

我们的想法是,当您单击页面上的任何导航元素时,循环将暂停.

单击主页按钮时,循环将再次启动(从当前图像).

这在它的当前状态下工作,但是在重新触发它时循环不是自动的,而是你必须按下每个淡入淡出/滑动/任何东西的主页按钮.

脚本如下:

$(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"); …