Question

我有一个简单的图片库滑块，下面有缩略图（正如你在jsfiddle中看到的那样）。当我点击一个较小的一个时，大的一个加载。到目前为止好啊。现在我需要Prev / Next按钮，选择小和大按钮，我不知道如何添加到这个脚本。我和JQuery有点不相干。欢迎任何形式的帮助。谢谢！

$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var $this = $(this),
            index = $this.index();
        $(".small-images img").removeClass('selected');
        $this.addClass('selected');
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

http://jsfiddle.net/Qhdaz/6/

Answer 1

我建议：

$(function() {
    // cache the collection for better performance
    var $big= $("#big-image img");
    var $small = $('.small-images img');

    // listen to the click event of the thumbnails
    $small.click(function(e){
        $small.removeClass('selected');
        var i = $(this).addClass('selected').index();
        $big.hide().eq(i).show();
    }).first().click();

    // listen to click event of the next and prev buttons
    // and trigger the click event for the target thumbnail
    $('.next, .prev').click(function() {
        var m = $(this).hasClass('next') ? 'next' : 'prev';
        var $t = $small.filter('.selected')[m]();
        if ($t.length) {
            $small.eq($t.index()).click();
        }
    });
});

http://jsfiddle.net/tghtgdhx/

Answer 2

注意：在标记中的第一个图像中添加selected类

<img class="selected" src="http://lorempixel.com/100/50/sports/1/">

JS：

$('#next').click(function(){ 
    var $selected = $('.selected');
    var index = $selected.next('img').index();
    if(index == -1){
        index = 0;
    }
    var $curr = $(".small-images img").eq(index);
    $(".small-images img").removeClass('selected');
    $curr.addClass('selected');
    $("#big-image img").eq(index).show().siblings().hide();
});

$('#prev').click(function(){ 
    var $selected = $('.selected');
    var index = $selected.prev('img').index();
    var $curr = $(".small-images img").eq(index);
    $(".small-images img").removeClass('selected');
    $curr.addClass('selected');
    $("#big-image img").eq(index).show().siblings().hide();
});

DEMO：http://jsfiddle.net/Qhdaz/616/

如何将prev / next导航添加到简单的JQuery库？

2 个答案: