Question

我有一个三个图像轮播。

<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描述了这个类＆＃34;图像适合＆＃34;但我不认为这是相关的。它仅描述图像的定位。谢谢。

Answer 1

我确实你可以使用jquery fading with bootstrap，因为bootsrap依赖于jquery - https://api.jquery.com/category/effects/fading/

Answer 2

我创建了一个淡化here div的示例。

基本上在CSS中为包含旋转木马的容器添加opacity: 1;。创建另一个具有opacity: 0;的类，该类将使用jQuery切换，然后覆盖原始不透明度值。

为此，请使用以下jQuery代码：

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

现在你有一个容器，如果按下触发器就会消失。要添加漂亮的淡入淡出效果，您需要像这样添加到容器的过渡：
transition: opacity 0.5s ease;

为我的bootstrap轮播添加淡入淡出效果

2 个答案: