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

JQuery background image slider using images from one of three arrays

场景:

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

我检查过你在 6 秒后调用了图像函数。您需要在 6 秒之前调用该动画一次。所以它会首先显示。不用等到 6 秒。

请检查这个link

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

希望这对您有所帮助:)

这是一个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/