图像缩略图库中的“下一个”和“上一个”按钮中的“问题”
Issue in Image Thumbnail Gallery next and prev buttons
我的实际需求是最初我需要显示3张缩略图。当我点击next时,接下来的三个新缩略图应该会显示出来。如果您引用此链接http://www.frontendwebhelp.com/javascript/jquery-photo-gallery.php
这正是我所需要的。在这里,下一个和上一个按钮的功能对于缩略图和较大的图像是不同的。
我不应该使用任何类型的旋转木马插件来获得这种效果。
这是我试过的。
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();
相关文章:
- 如何在猫头鹰旋转木马中滑动所有可见项目,而不是使用上一个/下一个按钮
- JQuery,引导导航 - 如何添加上一个/下一个按钮
- 如何在cycle2.js中悬停img时同时显示上一个/下一个按钮
- 如何移动到数组的上一个/下一个索引键
- iOS中的上一个/下一个按钮对于通过JavaScript隐藏/显示的输入被禁用
- 如何使用上一个/下一个功能循环数组中的图像
- jQuery 循环 如果只有一张幻灯片,则隐藏上一个/下一个导航
- 单击上一个/下一个按钮时,我想突出显示下一个或上一个图像
- 带有上一个/下一个的jquery自动滑块
- HTML5视频上一个 - 下一个和自动播放
- 如何在同一页面上使用下一个和上一个按钮更改内容
- 如何使用上一个/下一个按钮循环浏览图像
- 如何获取上一个/下一个非禁用选项的索引(相对于所选选项)
- JQuery:日期选择器:只有最后一个字段具有上一个/下一个按钮
- jQuery - 在滑块中显示/隐藏上一个/下一个按钮
- 具有上一个/下一个按钮的固定宽度和高度的文本容器
- 如何使用vanilla Javascript识别无序和/或嵌套列表序列中的上一个/下一个链接
- 如何使用angularjs或javascript添加上一个/下一个选项
- 数组中的上一个/下一个项目
- Javascript-幻灯片上的下一个/上一个按钮-新孩子需要帮助