图片库中的下一个/上一个按钮答案

【问题标题】：Next/Previous button in Image Gallery图片库中的下一个/上一个按钮
【发布时间】：2012-03-12 06:22:19
【问题描述】：

现在我有一个图片库，当用户单击缩略图时，相应的 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>

【问题讨论】：

标签： javascript image gallery

【解决方案1】：

为什么不只使用一个 div 来显示大的呢？（这是 jquery 支持）

我们的想法是更改您想要显示的唯一图像，而不仅仅是隐藏其他图像。您可以将实际保存为下一个按钮的属性（如果它们以 data- 开头则允许）

<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/ 不完美，但应该显示一点:)

【讨论】：

除了我的一个 div 是
哦，好吧，工作几乎相同！很快就会发布，需要更多时间:)
对 jQuery 没有任何异议。
jsfiddle.net/x6W8m - 播放视频时只有一个问题，但你可以处理这个问题 :) @ENev - 如果这有帮助，我希望你给我“正确答案”标志 :)

【解决方案2】：

你可以声明一个全局变量

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;
}

【讨论】：

嗯，除非我遗漏了一些东西，否则我认为这不会起作用。我的“onclick”属性需要为函数提供一个整数。
小修改，让画廊循环播放。 if(which 13) which = 11;

【解决方案3】：

在您的 javascript 中，声明一个全局变量 i，它表示当前可见的 div（在上面的代码中，例如，它是 'imagei'）。当用户点击 div image4 的缩略图时，比如将i 设置为4 等等。

现在对于上一个/下一个按钮，您已经知道i 的当前值，因此您知道正在显示哪个 div。现在增加或减少 i 以显示序列中的下一个 div。

如果您只想使用一个 div，here's a blog post 您可以从中复制图库的整个 javascript 代码，包括下一个/上一个按钮。

【讨论】：

我不确定如何让我的脚本知道哪个是可见的。对函数有什么建议吗？
我回答的第二句话告诉你怎么做。

【解决方案4】：

<!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>

【讨论】：