javascript - 幻灯片卡在最终图像上

Question

我目前正在尝试实现 Javascript 以像轮播一样通过图像进行幻灯片放映(为 IE8/IE9 开发，否则 CSS 转换/ Bootstrap 将是更简单的选择)

我遇到的问题是，对于第二组图像，它卡在最终图像上，而不是像第一组那样循环。

也没有办法以不同方式设置间隔，我尝试添加单独的 ID 但没有成功，检查此处以确保 Javascript 正确。

JS

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next() : $('#slideshow 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 );
});

HTML

<a href="#">
    <div id="slideshow">
        <img src="images/chelsey.png" alt="" class="active"/>
        <img src="images/rob.png" alt="" />
        <img src="images/chris.png" alt="" />
        <img src="images/alex.png" alt="" />
    </div>
</a>

<a href="#">
    <div id="slideshow">
        <img src="images/ross.png" alt="" class="active"/>
        <img src="images/miryam.png" alt="" />
        <img src="images/jo.png" alt="" />
        <img src="images/katie.png" alt="" />
    </div>
</a>

CSS

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

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

Answer 1

您对两个幻灯片使用相同的 id，但 id 必须是唯一的。你可以切换到类。此外，该函数必须遍历多个幻灯片，例如通过使用 jQuery each()。调整了你的Fiddle :

function slideSwitch() {

    $(".slideshow").each(function () {
        var $active = $(this).find(".active");
        if ($active.length == 0) {
            $active = $(this).find("IMG:last");
        }
        var $next = $active.next().length ? $active.next() : $(this).find("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);
});

.slideshow {
    position:relative;
    height:350px;
}
.slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
.slideshow IMG.active {
    z-index:10;
}
.slideshow IMG.last-active {
    z-index:9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a href="#">
   <div class="slideshow">
       <img src="http://lorempixel.com/400/200/sports/1/" alt="" class="active"/>
        <img src="http://lorempixel.com/400/200/sports/2/" alt="" />
   </div>
 </a>
 <a href="#">
   <div class="slideshow">
     <img src="http://lorempixel.com/400/200/sports/1/" alt="" class="active"/>
     <img src="http://lorempixel.com/400/200/sports/2/" alt="" />
   </div>
 </a>