我有一个三图轮播。
<div class="6u$ 12u$(medium) important(medium)">
<span class="image fit"><img src="screen1.png" alt="" /></span><span> class="image fit"><img src="screen2.png" alt="" /></span><span class="image fit"><img src="screen4.png" alt="" /></span></div>
图像使用javascript循环：
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("image fit");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 8000);}
</script>
我想在我的javascript中添加一些内容，以使图像淡入/淡出，或执行其他过渡效果。有没有简单的方法可以做到这一点？我有一些描述类“图像适合”的CSS，但我认为这无关紧要。它仅描述图像的位置。谢谢你。
我创建了一个示例来淡化div到这里。
基本上opacity: 1;在CSS中为包含轮播的容器提供一个。创建另一个opacity: 0;将要使用jQuery切换的类，然后该jQuery将覆盖原始的不透明度值。
为此，请使用以下jQuery代码：
$('.youTrigger').on('click', function () {
$('.yourContainer').toggleClass('yourClassWithOpacity0');
});
现在，您有了一个容器，如果您按一下触发器，它就会消失。要添加良好的淡入淡出效果，您需要像这样向容器添加一个过渡：
transition: opacity 0.5s ease;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句