Question

我目前正在尝试使用Javascript来幻灯片播放像旋转木马这样的图片（针对IE8 / IE9进行开发，否则CSS过渡/自举将是更容易的选择）

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

也无法以不同的方式设置时间间隔，我尝试添加单独的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>

幻灯片放映在最终图像上

1 个答案: