JQuery 淡入淡出图像与背景图像
JQuery Crossfading Images with background img
我在尝试使用图像交叉淡化幻灯片时遇到了一些问题。
这些图像由 background-img 属性显示。
当我使用 .fadeOut() 和 .fadeIn() 函数时,图像在显示下一张图像之前首先淡化为空。
我曾尝试使用 .load() 函数解决此问题,但似乎没有用。
这是我的代码:
mySlider.js:
var slides = [
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider13.png"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider10.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider9.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider3.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider4.png"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider2.png"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider11.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider12.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider1.png"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider5.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider7.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider8.jpg"
}
]
myScript.js:
const initiateSlider =()=> {
console.log("initiateSlider");
$("#mySlider").css('background-image', 'url(' + slides[0].src + ')');
$("#mySlider").data('sld','0');
setTimeout(nextSlide, 5000); // voert nextSlide 1x uit na x seconden
}
const nextSlide =()=> {
console.log("nextSlide");
let currentSlide = $("#mySlider").data('sld');
$("#mySlider").data('sld', parseInt(currentSlide) + 1);
let newSlideIndex = $("#mySlider").data('sld');
console.log(newSlideIndex);
if(newSlideIndex < slides.length)
{
$("#mySlider").css('background-image', 'url(' + slides[newSlideIndex].src + ')');
setTimeout(nextSlide, 5000);
}
else {
initiateSlider();
}
}
如您所说,主要问题是当图像淡出时,后面什么也没有。您需要将下一张图片放在第一张图片下面,这样当第一张图片淡出时,您可以慢慢看到后面的图片。然后,在淡出完成后,将该图像移到该行的后面。
所以在这个例子中,我所做的是让两个 div 恰好位于另一个之上。这是通过 position: absolute;
完成的。然后我淡出最上面的一个,所以显示最下面的那个,然后将最上面的一个移到底部,更改它的图像,并重置它的样式。此时另一张图片在上面,我只是淡出那一张。
<style>
.frame {
border: 2px solid grey;
position: relative;
height: 400px;
width: 400px;
}
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
}
.image:nth-child(1) {
z-index: 2;
}
</style>
<div class="frame">
<div class="image"></div>
<div class="image"></div>
</div>
<script>
let current_image = 0;
const images = [
'https://picsum.photos/200/300?image=0',
'https://picsum.photos/200/300?image=1',
'https://picsum.photos/200/300?image=2',
'https://picsum.photos/200/300?image=3',
'https://picsum.photos/200/300?image=4',
'https://picsum.photos/200/300?image=5',
'https://picsum.photos/200/300?image=6',
];
// keep track of current image
// increment by one
// if at end of array, start over
const update_counter = function(){
if (images[current_image] === undefined){
current_image = 0;
} else {
current_image += 1;
}
}
// get first image
// fade it out
// move it under the newly visible image
// update it's src to be new image
// remove it's style tag (which was applied by fadeOut() ) so it can be visible
// update current_image counter
const transition_images = () => {
const top_image = $('.image:nth-child(1)');
const bottom_image = $('.image:nth-child(2)');
const new_image = images[ current_image ];
top_image.fadeOut(2000, function(){
top_image.insertAfter(bottom_image);
top_image.removeAttr('style');
top_image.css('background-image', 'url('+ new_image +')');
update_counter();
});
}
// set up initial images
// get all .image elements and assign them an image attr
// each time one is assigned, update the current_image counter
$('.image').each(function(){
const new_image = images[ current_image ];
$(this).css('background-image', 'url('+ new_image +')');
update_counter();
});
// set timer in motion
const time = 2500;
setInterval(transition_images, time)
</script>
我在尝试使用图像交叉淡化幻灯片时遇到了一些问题。 这些图像由 background-img 属性显示。
当我使用 .fadeOut() 和 .fadeIn() 函数时,图像在显示下一张图像之前首先淡化为空。
我曾尝试使用 .load() 函数解决此问题,但似乎没有用。
这是我的代码:
mySlider.js:
var slides = [
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider13.png"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider10.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider9.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider3.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider4.png"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider2.png"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider11.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider12.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider1.png"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider5.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider7.jpg"
},
{
url: "#",
src: "http://localhost:8888/Imprez_v2/wp-content/uploads/2018/11/slider8.jpg"
}
]
myScript.js:
const initiateSlider =()=> {
console.log("initiateSlider");
$("#mySlider").css('background-image', 'url(' + slides[0].src + ')');
$("#mySlider").data('sld','0');
setTimeout(nextSlide, 5000); // voert nextSlide 1x uit na x seconden
}
const nextSlide =()=> {
console.log("nextSlide");
let currentSlide = $("#mySlider").data('sld');
$("#mySlider").data('sld', parseInt(currentSlide) + 1);
let newSlideIndex = $("#mySlider").data('sld');
console.log(newSlideIndex);
if(newSlideIndex < slides.length)
{
$("#mySlider").css('background-image', 'url(' + slides[newSlideIndex].src + ')');
setTimeout(nextSlide, 5000);
}
else {
initiateSlider();
}
}
如您所说,主要问题是当图像淡出时,后面什么也没有。您需要将下一张图片放在第一张图片下面,这样当第一张图片淡出时,您可以慢慢看到后面的图片。然后,在淡出完成后,将该图像移到该行的后面。
所以在这个例子中,我所做的是让两个 div 恰好位于另一个之上。这是通过 position: absolute;
完成的。然后我淡出最上面的一个,所以显示最下面的那个,然后将最上面的一个移到底部,更改它的图像,并重置它的样式。此时另一张图片在上面,我只是淡出那一张。
<style>
.frame {
border: 2px solid grey;
position: relative;
height: 400px;
width: 400px;
}
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
}
.image:nth-child(1) {
z-index: 2;
}
</style>
<div class="frame">
<div class="image"></div>
<div class="image"></div>
</div>
<script>
let current_image = 0;
const images = [
'https://picsum.photos/200/300?image=0',
'https://picsum.photos/200/300?image=1',
'https://picsum.photos/200/300?image=2',
'https://picsum.photos/200/300?image=3',
'https://picsum.photos/200/300?image=4',
'https://picsum.photos/200/300?image=5',
'https://picsum.photos/200/300?image=6',
];
// keep track of current image
// increment by one
// if at end of array, start over
const update_counter = function(){
if (images[current_image] === undefined){
current_image = 0;
} else {
current_image += 1;
}
}
// get first image
// fade it out
// move it under the newly visible image
// update it's src to be new image
// remove it's style tag (which was applied by fadeOut() ) so it can be visible
// update current_image counter
const transition_images = () => {
const top_image = $('.image:nth-child(1)');
const bottom_image = $('.image:nth-child(2)');
const new_image = images[ current_image ];
top_image.fadeOut(2000, function(){
top_image.insertAfter(bottom_image);
top_image.removeAttr('style');
top_image.css('background-image', 'url('+ new_image +')');
update_counter();
});
}
// set up initial images
// get all .image elements and assign them an image attr
// each time one is assigned, update the current_image counter
$('.image').each(function(){
const new_image = images[ current_image ];
$(this).css('background-image', 'url('+ new_image +')');
update_counter();
});
// set timer in motion
const time = 2500;
setInterval(transition_images, time)
</script>