0

我创建了一个 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');

没运气

4

1 回答 1

3

让我们简化一下。没有不透明度/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/

于 2013-05-31T18:16:17.623 回答