2

使用以下代码，我得到“#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>
4

2 回答 2

5

很抱歉，我无法应对您的延误，所以我改用了超时。这样，当手动导航轮播时，动画将被取消。

演示（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
于 2013-01-08T19:50:47.297 回答
1

如果你使用 Twitter Bootstrap 3，你需要使用slide.bs.carousel代替slide和slid.bs.carousel代替slid

http://getbootstrap.com/javascript/#carousel-usage事件部分。

于 2013-12-16T09:36:36.150 回答