Question

使用以下代码，我将“＃featured-carousel”的内容淡入和淡出幻灯片2,3等。但是，不适用于第一张幻灯片。
第一张幻灯片第一次进入和退出时如何获得第一张幻灯片？

<script type="text/javascript">
        jQuery(document).ready(function($) {

            var color = "<?=$color?>";
            var header_color = "<?=$header_color?>";        

            $('#featured-carousel').bind('slide', function() {
                $(".carousel-caption").animate({'opacity': 0}, 500).delay(2000);  
                $(".item img").animate({'opacity': 1}, 500).delay(2000);          
                $(".carousel-caption").animate({'opacity': 1}, 500).delay(2000); 
                $(".item img").animate({'opacity': 0.2}, 500).delay(2000);                 
            }); 

            $('#featured-carousel').carousel({
                   interval: 6000,
                      cycle: true,          
            });

        });
    </script>

Answer 1

对不起，我无法应对你的延误，所以我使用了超时。这样，当手动导航轮播时，动画将被取消。

Demo (jsfiddle)

首先，一些CSS使第一个项目看起来像动画的开头，但如果您愿意，可以使用一些JS来完成：

#myCarousel .carousel-caption {
  opacity: 0;
  filter: alpha(opacity=0);
}

然后是动画部分，分为两个绑定：当我们开始动画时和我们需要重置外观时：

var $carousel = $('#myCarousel');
var $carouselCaptions = $carousel.find('.item .carousel-caption');
var $carouselImages = $carousel.find('.item img');
var carouselTimeout;

$carousel.on('slid', function () {
    var $item = $carousel.find('.item.active');
    carouselTimeout = setTimeout(function() { // start the delay
        carouselTimeout = false;
        $item.find('.carousel-caption').animate({'opacity': 1}, 500);
        $item.find('img').animate({'opacity': 0.2}, 500);
    }, 2000);
}).on('slide', function () {
    if(carouselTimeout) { // Carousel is sliding, stop pending animation if any
        clearTimeout(carouselTimeout);
        carouselTimeout = false;
    }
    // Reset styles
    $carouselCaptions.animate({'opacity': 0}, 500);
    $carouselImages.animate({'opacity': 1}, 500);
});;

$carousel.carousel({
    interval: 6000,
    cycle: true,
}).trigger('slid'); // Make the carousel believe that it has just been slid so that the first item gets the animation

Answer 2

如果您使用的是Twitter Bootstrap 3，则需要使用 slide.bs.carousel 而不是幻灯片和 slid.bs.carousel 而不是滑动

http://getbootstrap.com/javascript/#carousel-usage活动部分。

在Twitter Bootstrap Carousel中淡入和淡出每张幻灯片的内容

2 个答案: