JQuery 使用来自三个阵列之一的图像的背景图像滑块
JQuery background image slider using images from one of three arrays
场景:
- 我有一个背景图片滑块。
- JQuery 侦听 window 的大小调整,并根据屏幕大小将给定数组设置为图像文件路径的来源。
- 转换之间有 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);
});
我检查过你在 6 秒后调用了图像函数。您需要在 6 秒之前调用该动画一次。所以它会首先显示。不用等到 6 秒。
请检查这个link
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);
});
场景:
- 我有一个背景图片滑块。
- JQuery 侦听 window 的大小调整,并根据屏幕大小将给定数组设置为图像文件路径的来源。
- 转换之间有 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);
});
我检查过你在 6 秒后调用了图像函数。您需要在 6 秒之前调用该动画一次。所以它会首先显示。不用等到 6 秒。
请检查这个link
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);
});