图像缩略图库的下一个和上一个按钮中的问题 [英] Issue in Image Thumbnail Gallery next and prev buttons

问题描述

对我的实际需求是，最初我需要显示3thumbnail图片.当我单击下一步时，应该显示接下来的三个新缩略图.如果您引用此链接 http://www.frontendwebhelp.com/javascript/jquery-photo-gallery.php

Actual need for me is Initially I need to show 3thumbnail images. As I clicked on next the next three new thumbnail images should be displayed. If you refer this link http://www.frontendwebhelp.com/javascript/jquery-photo-gallery.php

这正是我所需要的.对于缩略图图像和较大图像，此处的下一个和上一个按钮功能有所不同.

this is what exactly I needed. Here the next and prev buttons functionality is different for thumbnail images and larger image.

我不应该使用任何旋转木马插件来获得这种效果.

I should not use any kind of carousel plugin to get this effect.

这是我尝试过的.

http://jsfiddle.net/L7yKp/37/

我需要一些帮助.

推荐答案

请参见 http://jsfiddle.net/L7yKp/60/

function thumbs(i,incr){
    var num_thumbs=2;
    if(i===null){
        i=$("#thumbs").prop('data-index'),
        i+=num_thumbs*incr;
    }
    i=Math.max(1,Math.min(i,$('#thumbs .UiUx3DSSVFlow').length-num_thumbs+1));
    $("#thumbs").prop('data-index',i);
    $('#thumbs .UiUx3DSSVFlow').hide();
    $('#thumbs .UiUx3DSSVFlow:nth-child(n+'+i+'):nth-child(-n+'+Number(i+num_thumbs-1)+')').show();
}
$("#panel .UiUx3DSSVFlow").not(':first').hide();
$("#thumbs .UiUx3DSSVFlow").click(function(){
    getIndex = $(this).index();
    $("#thumbs .clicked").removeClass('clicked');
    $("#panel .UiUx3DSSVFlow").hide().eq(getIndex).show();  
    $(this).addClass('clicked');
    thumbs(getIndex+1);        
});
$("#thumbs .UiUx3DSSVFlow:first").click();
$("#thumbs").prop('data-index',1);
$([['next',1],['prev',-1]]).each(function(){
    var that=this;
    $('#t'+that[0]).click(function(){
        thumbs(null,that[1]);
    });
    $('#l'+that[0]).click(function(){
        $('#thumbs .clicked')[that[0]]().click();
    });
});
$('#tprev').click();

这篇关于图像缩略图库的下一个和上一个按钮中的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！