我在尝试用图像交叉淡入淡出幻灯片时遇到了一些麻烦。这些图像由 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();
}
}