使用来自三个数组之一的图像的 JQuery 背景图像 slider

Question

场景:

• 我有一个背景图像 slider 。
• JQuery 监听窗口大小的调整，并根据屏幕大小将给定数组设置为图像文件路径的来源。
• 转换之间有 6 秒的延迟，一切似乎都正常，只是我无法在前 6 秒内显示图像。
• 到目前为止，所有的努力都导致第一张图片显示两次，而不是依次循环显示阵列。

jsfiddle demo

$(function(){

var img_41 = "url('https://s33.postimg.org/e11jeeisv/lagoon-467.jpg')",
img_42 = "url('https://s33.postimg.org/68avmepof/christmas-467.jpg')",
img_43 = "url('https://s33.postimg.org/cyrcvu54f/cars-467.jpg')",
img_1 = "url('https://s33.postimg.org/vr37zgr8v/lagoon-720.jpg')",
img_2 = "url('https://s33.postimg.org/mw2doxfb3/christmas-720.jpg)",
img_3  = "url('https://s33.postimg.org/f3bpwyorj/cars-720.jpg')",
img_91 = "url('https://s33.postimg.org/qsfpkxv5r/lagoon-991.jpg')",
img_92 = "url('https://s33.postimg.org/5is3a2rpr/christmas-991.jpg')",
img_93 = "url('https://s33.postimg.org/a4o7ieidr/cars-991.jpg')",
slider1 =[img_1, img_2, img_3],
slider2 =[img_41, img_42, img_43],
slider3 =[img_91, img_92, img_93],
i =0;

var $target = $('.wrapper');
var $win=$(window);
var arr;    

$win.on('resize', function() {
    var screen= $win.width();
    if(screen < 468){
        arr = slider2;  
    }
    else if(screen > 991){
        arr = slider3;  
    }
    else{
        arr = slider1;  
    }

    $target.css({
        'background-repeat':'no-repeat',
        'background-position': 'center center',
        'display':'block'
    });
}).resize();


setInterval(function() {
    $target.animate({ opacity: 0 }, 500, function() {
        console.log(arr[i]);
        $target.css('background-image', arr[i]);
        i++;
        $target.animate({ opacity: 1 }, 500, function() {
            if(i === arr.length) i = 0;
        });
    });
   }, 6000);
});

Answer 1

这是一个 fiddle 。您必须使所有变量成为全局变量。然后你创建一个函数，它自己进行更改

然后在document.ready上调用函数然后设置循环

/*global variables here*/
        function slide(){
         $target.animate({ opacity: 0 }, 500, function() {
            console.log(arr[i]);
             $target.css('background-image', arr[i]);
             i++;
             $target.animate({ opacity: 1 }, 500, function() {
               if(i === arr.length) i = 0;
             });
           });

        }

     $(function(){
    /*other code here*/
            slide();
            setInterval(function() {
          slide();
        }, 6000);

    });

https://jsfiddle.net/4xs7rm2v/