在我的引导程序传送带上添加淡入淡出效果

我有三个图像传送带。在我的引导程序传送带上添加淡入淡出效果

<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描述类“形象适合”，但我不认为它是相关的。它只描述图像的位置。谢谢。

来源

2016-12-07 Tj Keel

您必须考虑元素的透明度。在CSS中，它可能是“不透明”的。 – Anson

我创建了一个例子在here褪色一个div。

基本上给你的容器包含你的轮播在CSS中。创建另一个具有opacity: 0;的类，该类将使用jQuery进行切换，然后覆盖原始的不透明度值。

要做到这一点使用下面的jQuery代码：

$('.youTrigger').on('click', function() { 
    $('.yourContainer').toggleClass('yourClassWithOpacity0'); 
});

现在你有，如果你按下扳机那消失的容器。要添加一个很好的衰落效果，您需要像这样向容器添加转场：
transition: opacity 0.5s ease;

来源

2016-12-07 09:14:20 SUBHUMAN

谢谢。我的传送带由计时器旋转，因此.on。（'点击'）呼叫将不合适。虽然逻辑是一样的吗？ –

当然，只要每次你想让转盘淡入或者淡出时调用toggleClass。在我的解决方案中，重要的是将不透明度为0的类切换出来。不管触发器的功能是什么类型都没有关系。 – SUBHUMAN

我beleve，你将能够使用jQuery的自举为bootsrap衰落是依赖于jQuery的 - https://api.jquery.com/category/effects/fading/

来源

2016-12-07 08:59:20

感谢您的链接。 –

我尝试了一些方法，但无法使其工作。你知道我如何在上面的Javascript中实现这一点，同时仍然保持我的计时功能完好无损 –

在我的引导程序传送带上添加淡入淡出效果

回答

相关问题