我的具体问题是,在幻灯片样式的图像切换期间,图像在下一个图像过渡之前突然消失。
整个幻灯片效果很好,只是在下一幅图像消失之前每幅图像突然消失是令人不安的。
我是一个初学者,没有JQuery经验,所以想知道我是否应该使用与webkit动画不同的东西。
HTML:
<div class="pimgSlideshow"; style="max-width:500px">
<img class="mySlides fade" src="../images/pic1.jpg" style="width:100%">
<img class="mySlides fade" src="../images/pic2.jpg" style="width:100%">
<img class="mySlides fade" src="../images/pic3.jpg" style="width:100%">
</div>
CSS:
.mySlides {display:none;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .5}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .5}
to {opacity: 1}
}
JS:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 5000);
}
答案 0 :(得分:0)
与其使用CSS动画,不如使用CSS过渡效果更好,而不是使用display:none;在javascript中分别使用opacity =“ 0”和opacity =“ 1”。
通过完全定位图像,它们在淡入和淡出时将看起来像在彼此的顶部。
更新了JS:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.opacity = "0";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.opacity = "1";
setTimeout(carousel, 5000);
}
CSS
.pimgSlideshow {
position: relative;
}
.mySlides {
display:block;
transition: ease all 1s;
position: absolute;
left: 0;
top: 0;
}
请参阅此小提琴以演示:http://jsfiddle.net/c8uaqk31/19/