圖片庫中的下一個/上一個按鈕

Question

現在，我有一個圖庫，當用戶單擊縮略圖圖像時，它會更改圖像，相應的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>

Answer 1

為什么不只使用一個div來顯示大的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/並不完美，但應該顯示一點:)

Answer 2

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

Answer 3

在您的JavaScript中，聲明一個全局變量i ，它表示當前可見的div（例如，在上面的代碼中，它是“ imagei ”）。 例如，當用戶單擊div image4的縮略圖時，將i設置為4 ，依此類推。

現在，對於上一個/下一個按鈕，您已經知道i的當前值，因此您知道要顯示哪個div。 現在增加或減少i以顯示序列中的下一個div。

如果您只想使用一個div，那么這里有一篇博客文章，您可以在其中復制畫廊的整個javascript代碼，包括下一個/上一個按鈕。

Answer 4

你可以聲明一個全局變量

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

圖片庫中的下一個/上一個按鈕

問題描述

4 個解決方案

解決方案1
2 2012-02-21 22:24:20

解決方案2
1 2015-03-02 03:25:09

解決方案3
1 2012-02-21 22:22:10

解決方案4
1 已采納 2012-02-21 22:23:52

圖片庫中的下一個/上一個按鈕

問題描述

4 個解決方案

解決方案1 2 2012-02-21 22:24:20

解決方案2 1 2015-03-02 03:25:09

解決方案3 1 2012-02-21 22:22:10

解決方案4 1 已采納 2012-02-21 22:23:52

解決方案1
2 2012-02-21 22:24:20

解決方案2
1 2015-03-02 03:25:09

解決方案3
1 2012-02-21 22:22:10

解決方案4
1 已采納 2012-02-21 22:23:52