javascript - 如何将链接添加到我的自定义 javascript 图像交换？

Question

我有一个我称之为幻灯片的 div

<div id="slideshow">
<img src="images/imageslider/Pic1.jpg" style="width:270px;" alt="" />
<img src="images/imageslider/Pic2.jpg" style="width:270px;" alt="" />
<img src="images/imageslider/Pic3.jpg" style="width:270px;" alt="" />
</div>

这是我的javascript：

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

// use this to pull the images in the order they appear in the markup

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()", 6000 );
});

发生的事情是，当我改变

<img src="images/imageslider/Pic1.jpg" style="width:270px;" alt="" />

至

<a href="http://google.com"><img src="images/imageslider/Pic1.jpg" style="width:270px;" alt="" /></a>

该脚本导致函数表现不稳定。它不是通过链接淡入下一张图片，而是跳转而不是按预定义的顺序。

Answer 1

您必须在链接上调用它：

function slideSwitch() 
{
    var $active = $('#slideshow a.active');
    if ( $active.length == 0 ) $active = $('#slideshow a:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow a:first');

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

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