Question

情形：

我有一个背景图片滑块。
JQuery侦听窗口的大小调整，并根据屏幕大小将给定数组设置为图像文件路径的源。
转换之间有6秒的延迟，除了我在前6秒内无法显示图像外，它们似乎都能正常工作。
到目前为止，任何努力都会导致第一张图像显示两次，而不是连续循环显示阵列。

$(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

当我检查你6秒后调用你的图像功能。你需要在6秒前调出一次动画。所以它会先显示出来。没有等到6秒。

请查看此链接

CHECK THIS

<强> HTML

<div class="wrapper"></div>

<强> CSS

.wrapper{height:500px}

<强>的jQuery

$（函数（）{

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();

    rotateImages($target,arr,i)
    setInterval(function() {
    rotateImages($target,arr,i)
  }, 6000);
});

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

希望这会对你有所帮助:)。

Answer 2

这是一个小提琴。您必须使所有变量全局化。然后你创建一个功能，使变化本身

然后在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/

JQuery背景图像滑块使用来自三个阵列之一的图像

2 个答案: