图像缩略图库中的问题下一个和上一个按钮

我的实际需要是，最初我需要显示3张图像。 当我点击下一步时，应显示下三个新的缩略图。 如果您参考此链接http://www.frontendwebhelp.com/javascript/jquery-photo-gallery.php

这正是我所需要的。 这里，缩略图和较大图像的下一个和上一个按钮function是不同的。

我不应该使用任何类型的轮播插件来获得这种效果。

这是我尝试过的。

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

我需要一些帮助。

Answer 1

见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();