图像库中的“下一个/上一个”按钮
Next/Previous button in Image Gallery
现在我有一个图像库,当用户点击缩略图时,它会更改图像——适当的div的样式会更改为块,其余的都隐藏起来。我希望能够添加下一个/上一个按钮以进行额外的导航。
我的想法是使用getElementByAttribute找到唯一一个带有"style="display:block"的图像,然后以某种方式在div中加/减一。但恐怕我不知所措。有什么建议吗?
当前代码:
<div id="image1" style="display:block"><img src="resources/images/larges/01.jpg"></div>
<div id="image2" style="display:none"><img src="resources/images/larges/02.jpg"></div>
. . .
<img style='cursor:pointer;' onclick="showDiv(1)" src="resources/images/thumbs/01.jpg">
<img style='cursor:pointer;' onclick="showDiv(2)" src="resources/images/thumbs/02.jpg">
. . .
<script type = "text/javascript">
function showDiv(which) {
for(i = 0; i < 13; i++) {
document.getElementById("image"+i).style.display="none";
}
document.getElementById("image" + which).style.display = "block";
}
</script>
您可以声明全局变量
var currentImage = 1; //assuming the 1st image shown is always the first
然后,添加两个按钮,
<button type="button" onclick="showDiv(currentImage - 1)">Previous</button>
<button type="button" onclick="showDiv(currentImage + 1)">Next</button>
在您的函数中,您使用给定的参数更新currentImage
function showDiv(which) {
for(i = 0; i < 13; i++) {
document.getElementById("image"+i).style.display="none";
}
//in the next 2 lines, you make sure which isn't lower than 1, and isn't greater than the number of images
if(which < 1) which = 1;
if(which > 13) which = 13;
document.getElementById("image" + which).style.display = "block";
currentImage = which;
}
为什么不只使用一个div来显示大的div?(这是jquery支持)
这个想法是改变你想要显示的唯一图像,而不仅仅是隐藏其他图像。您可以将实际值保存为下一个按钮的属性(如果它们以数据-开头,则允许)
<div style="display:block"><img id="largeimg" data-nr="1" src="resources/images/larges/01.jpg"></div>
<img data-nr="1" class="clickable" style='cursor:pointer;' src="resources/images/thumbs/01.jpg">
<img data-nr="2" class="clickable" style='cursor:pointer;' src="resources/images/thumbs/02.jpg">
. . .
<script type = "text/javascript">
$(document).ready(function(){
$(".clickable").each(function({
this.click(function(){
$("#largeimg").attr("src",this.attr("src")).attr("data-nr",this.attr("data-nr"));
}
}
});
function nextpic() {
newid = parseInt($("#largeimg").attr("data-nr"))+1;
newsrc = $(".clickable[data-nr="+newid+"]").attr("src");
$("#largeimg").attr("src",newsrc).attr("data-nr",newid);
}
</script>
编辑:因为他说也应该用于视频:http://jsfiddle.net/x6W8m/不是完美的,但应该显示一点:)
在您的javascript中,声明一个全局变量i
,它表示当前可见的div(例如,在上面的代码中,它是'imagei
')。当用户单击div image4
的缩略图时,例如,将i
设置为4
,依此类推
现在,对于上一个/下一个按钮,您已经知道i
的当前值,因此您知道要显示哪个div。现在递增或递减i
以显示序列中的下一个div。
如果您只想使用一个div,这里有一篇博客文章,您可以从中复制库的整个javascript代码,包括下一个/上一个按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Next and Previous Button</title>
<link rel="stylesheet" href="">
</head>
<body>
<img src="images.jpg" id="imgDemo" alt="HTML5 Icon" width="128" height="128">
<button onclick="nxt()" id="btnOne">next</button>
<button onclick="prvs()" id="btnTwo">previous</button>
<script>
var img = new Array("images.jpg","images1.jpg","images2.jpg","images3.jpg","images4.jpg","images5.jpg","images6.jpg","images7.jpg","images8.jpg");
var imgElement = document.getElementById("imgDemo");
var i = 0;
var imgLen = img.length;
function nxt()
{
if(i < imgLen-1)
{
i++;
}
else{
i=0;
}
imgElement.src = img[i];
}
function prvs()
{
if(i > 0)
{
i--;
}
else
{
i = imgLen-1;
}
imgElement.src = img[i];
}
</script>
</body>
</html>
相关文章:
- 当滑块只有一个图像时,如何禁用下一个/上一个按钮
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 下一个/上一个锚链接,如何在用户滚动时更新下一个/上一个链接
- Jquery UI选项卡&选择方框-下一个/上一个按钮
- 引导分页下一个上一个不起作用
- 使用“下一个”/“上一个”按钮切换图像
- 角度 - ng 网格通过分组按语法选择下一个/上一个项目
- 下一个/上一个 jQuery 控件类跳转了太多的列表项
- 显示带有缩略图和下一个/上一个按钮的图像
- 花式框下一个/上一个不显示 iframe
- j查询滑动选项卡:控制选项 - 下一个/上一个
- 如何将左/右箭头(下一个/上一个)功能添加到我的 jQuery 图像和文本滑块
- j查询带有下一个/上一个的 UI 选项卡
- 如何通过幻灯片查看活动箭头(下一个/上一个)
- 尝试运行下一个上一个按钮以播放列表媒体播放器代码中的视频,出现错误
- 修复了标题导航和滚动到()下一个/上一个元素
- 将下一个/上一个输入集中在达到最大长度或退格键上
- 数据表:禁用第一个下一个上一个最后一个,并在处理时显示/搜索记录
- 如何从简介.js工具提示中动态添加或删除下一个/上一个按钮
- Javascript幻灯片与播放暂停和下一个上一个按钮