Question

我想知道如何改进缩略图库，这样就可以点击主图像前进到列表中的下一个图像。主图像位于#image div中。现在，您只能单击缩略图（.image）来选择图像。以下是它现在的设置方式。任何帮助将不胜感激。

<ul class="thumb">

<li><a href="images/1.png" class="image"><img src="images/t1.png"border="0"/></a></li>
<li><a href="images/2.png" class="image"><img src="images/t2.png"border="0"/></a></li>

 <div id="container"><div id="image"></div> 
</div>



$(function() {
$(".image").click(function() {
var image = $(this).attr("href");

$('#image').hide();
$('#image').fadeIn();
$('#image').html('<img src="' + image + '">');  

return false;
    });
    (location.attr)? $("a [rel="+location.attr+"]").click():$(".thumb a:first").click();

});

Answer 1

请注意，您的HTML格式不正确。您错过了结束ul。不确定这是不是一个错字。无论如何，这样做你想要的吗？

$("#image").click(function() {
    var $this = $(this);
    var $thumbs = $(".thumb");
    var currentImage = $this.children("img").attr("src");

    // Find the next image in the list of thumbs
    var $next = $("a[href='" + currentImage + "']", $thumbs).closest("li").next().find("a");

    // If at the end of the list of thumbs, use the first
    if ($next.length < 1)
        $next = $("li:first a", $thumbs);

    var image = $next.attr("href");

    $this.hide();
    $this.fadeIn();
    $this.html('<img src="' + image + '">');
});

Demo

点击图片进行推进

1 个答案: