Question

在没有锚标签的情况下工作正常但是，当我在图像标签之前放置锚标签时，为了进行图像链接，它只显示一个图像。演示链接：http://jsfiddle.net/vrD2C/

Javascript代码：

$(document).ready(function() {

    $("#photos a img:gt(0)").hide();
    setInterval(function() {
        var current = $('#photos a img:visible');
        var next = current.next().length ? current.next() : $('#photos a img:eq(0)');
        current.fadeOut();
        next.fadeIn();
    }, 3000);

});

HTML CODE：

<div id="photos">
    <a href="advertise.php">
        <img src="images/in-the-outfield.jpg" />
    </a>
    <a href="advertise.php">
        <img src="images/ballpark-scoreboard.jpg" />
    </a>
    <a href="advertise.php">
        <img src="images/batting-helmets.jpg" />
    </a>
    <a href="advertise.php">
        <img src="images/baseball-in-glove.jpg" />
    </a>
</div>

Answer 1

在您的选择器中使用a代替img。

HTML 的

<div id="photos">
    <a href="advertise.php">
        <img src="http://imagefader.s3.amazonaws.com/0.jpg" />
    </a>
    <a href="advertise.php">
        <img src="http://imagefader.s3.amazonaws.com/1.jpg" />
    </a>
</div>

脚本

$(function () {
    $("#photos a:gt(0)").hide(); //Updated selector here
    $("#photos a:first").addClass("shadow"); //Updated selector here
});

function next() {
    var $currentImage = $("#photos a:visible"); //Updated selector here
    var $nextImage = $currentImage.next();
    if ($nextImage.length == 0) {
        $nextImage = $("#photos a:first"); //Updated selector here
    }
    swapImage($currentImage, $nextImage);
}

DEMO

链接和图像不能一起工作

1 个答案: