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');
        });
}

如何添加指向自定义javascript图像交换的链接？

1 个答案: