我创建了一个带有交叉淡入淡出的图像幻灯片,它每秒自动循环一次。交叉淡入淡出效果很好,每次图像淡入和旧图像淡出时,它的顶部位置都比前一个高。然后,在最终图像中,图像位置会重置。
步骤:
1. 顶部边距:-575px
2. 顶部边距:-600px(我假设)
3. 顶部边距:-625px(同样,我假设)
你明白了......,它在上升,然后在第一张图片处重置
jQuery
$(function() {
var slides = [$("#image1"),$("#image2"), $("#image3"), $("#image4"), $("#image5")];
var slidePos = 0;
setInterval(function() {
if (slidePos < slides.length-1) {
slides[slidePos].animate({
opacity: "0"
}, 1000);
slides[slidePos+1].animate({
opacity: "1"
}, 1000, function() {
slidePos++;
});
} else {
marginCalc = 575;
slides[slidePos].animate({
opacity: "0"
}, 1000);
slidePos = 0;
slides[slidePos].animate({
opacity: "1"
}, 1000);
}
}, 3000);
});
相关的CSS
.slideshow-container {
width: 100%;
background-color: yellow;
height: 100%;
text-align: center;
}
img {
width: 70%;
max-width: 800px;
margin: 0 auto 0 auto;
}
.transparent-image {
position: relative;
opacity: 0;
display: block;
margin-top: -50.5%;
}
#image1 {
opacity: 1;
margin-top: 0;
}
最佳答案
是否有显示您的问题的链接?
关于javascript - 如何修复自动图像移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57262833/