Question

我创建了一个jquery图库。它几乎完美地工作，所有图像都随着淡出/变化而变化。

问题是：在最后一张图像之后，第一张图像显示没有淡入淡出效果。

HTML代码：

<div id="gallery-holder">
    <img src="images/main-galery1.jpg" class="active"  >
    <img src="images/main-galery2.jpg" >
    <img src="images/main-galery3.jpg" >

</div>

CSS代码：

#gallery-holder{
  position:relative;
  top:0px;
  width:980px;
  height:300px;
  margin-left:auto;
  margin-right:auto; 
  overflow:hidden;
}

 #gallery-holder img{

   position:absolute;
   top:0;
   left:0;
   z-index:8;
}

#gallery-holder .active{
   z-index:10;
} 
#slideshow IMG.last-active {
   z-index:9;

}

Java脚本

$(document).ready(function(){
 slideSwitch();
});



function slideSwitch() {
 var $active = $('#gallery-holder IMG.active');

 if ( $active.length == 0 ) $active = $('#gallery-holder IMG:last');

 var $next =  $active.next().length ? $active.next()
   : $('#gallery-holder IMG:first');

 $active.addClass('last-active');

 $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
 }

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

任何建议？

我试图替换：

$active.removeClass('active last-active');

用这个：

$('#gallery-holder IMG.active').removeClass('active last-active');

没有运气

Answer 1

让我们简化一下。没有opacity / css，没有活动类，只是简单的jQuery淡出：

(function slideSwitch() {
    var $gallery = $('#gallery-holder'),
        $active  = $gallery.find('img:visible'),
        $next    = $active.next().length ? $active.next() : $gallery.find('img').first();

    setTimeout(function() {
        $active.fadeOut('fast');
        $next.fadeIn('fast', slideSwitch);
    }, 2000);
}());

演示：http://jsfiddle.net/AlienWebguy/npTD9/

jquery图片库 - 第一张图片没有褪色

1 个答案: