如何製作圖片瀏覽器？

我想製作一個圖像瀏覽器（用於我的網站），就像Facebook中的一個（舊的）。當用戶單擊下一個或後退箭頭時，它將更改圖片和頁面的URL。如何製作圖片瀏覽器？

這是我想要的（http://www.facebook.com/pages/Forest-Ville/307556775942281）

更重要的是我希望的頁面與每個重載單擊新（URL，評論框，廣告等），我不希望使用任何一個例子餅乾。現在我正在使用它，但它與我想要的完全不同。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<script language="JavaScript"> 

      var NumberOfImages = 10 
      var img = new Array(NumberOfImages) 

      img[0] = "http://damnthisfunny.site40.net/1.jpg" 
      img[1] = "http://damnthisfunny.site40.net/2.jpg" 
      img[2] = "http://damnthisfunny.site40.net/3.jpg" 
      img[3] = "http://damnthisfunny.site40.net/4.jpg" 
      img[4] = "http://damnthisfunny.site40.net/5.jpg" 
      img[5] = "http://damnthisfunny.site40.net/6.jpg" 
      img[6] = "http://damnthisfunny.site40.net/7.jpg" 
      img[7] = "http://damnthisfunny.site40.net/8.jpg" 
      img[8] = "http://damnthisfunny.site40.net/9.jpg" 
      img[9] = "http://damnthisfunny.site40.net/10.jpg" 

      var imgNumber = 0 
      function NextImage() 
      { 
       imgNumber++ 
       if (imgNumber == NumberOfImages) 
        imgNumber = 0 
       document.images["VCRImage"].src = img[imgNumber] 
      } 
      function PreviousImage() 
      { 
       imgNumber-- 
       if (imgNumber < 0) 
        imgNumber = NumberOfImages - 1 
       document.images["VCRImage"].src = img[imgNumber] 
      } 


</script> 



<body> 
<center> 

<img name="VCRImage" src="http://damnthisfunny.site40.net/1.jpg" /></dr> 
<br /> 
<a href="javascript:PreviousImage()"> 
<img border="0" src="left1.jpg" /></a> 
<a href="javascript:NextImage()"> 
<img border="0" src="right1.jpg" /></a> 
</center> 
</body> 
</html>

任何想法？

來源

2012-01-10 Maansahir

如果你想每次刷新頁面，你可以簡單地更新location.href與哈希值追加它表示要加載圖像：

<img id="theImg" name="VCRImage" src="http://damnthisfunny.site40.net/1.jpg" /></dr> 
<a href="javascript:PreviousImage()"> 
<img border="0" src="left1.jpg" /></a> 
<a href="javascript:NextImage()"> 
<img border="0" src="right1.jpg" /></a> 

<script type="text/javascript"> 
    var NumberOfImages = 10 
    var img = new Array(NumberOfImages); 
    img[0] = "http://damnthisfunny.site40.net/1.jpg"; 
    img[1] = "http://damnthisfunny.site40.net/2.jpg"; 
    img[2] = "http://damnthisfunny.site40.net/3.jpg"; 
    img[3] = "http://damnthisfunny.site40.net/4.jpg"; 
    img[4] = "http://damnthisfunny.site40.net/5.jpg"; 
    img[5] = "http://damnthisfunny.site40.net/6.jpg"; 
    img[6] = "http://damnthisfunny.site40.net/7.jpg"; 
    img[7] = "http://damnthisfunny.site40.net/8.jpg"; 
    img[8] = "http://damnthisfunny.site40.net/9.jpg"; 
    img[9] = "http://damnthisfunny.site40.net/10.jpg"; 

    var imgNum = parseInt(location.hash.substring(location.hash.indexOf('img=')+4)); 
    if (isNaN(imgNum) || imgNum < 1 || imgNum > NumberOfImages) 
     imgNum = 1; 
    document.getElementById('theImg').src = img[imgNum]; 

    function NextImage() 
    { 
     location.href = 'this.html#img='+(imgNum+1); 
    } 
    function PreviousImage() 
    { 
     location.href = 'this.html#img='+(imgNum-1); 
    } 
</script>

來源

2012-01-10 02:11:53 Aaron

但現在的問題是每次我重新加載頁面時，它都會將slidingshow放置到第一個圖像上。 – Maansahir 2012-01-10 02:16:42

哎呀，忘了放入'NaN'檢查器。它現在應該工作。 – Aaron 2012-01-10 02:47:12

我會建議使用一個jQuery插件爲這樣的項目，然後定製它以滿足您的需求。

這裏是一個鏈接，讓你盯着：http://www.designsmag.com/2011/06/50-jquery-image-gallery-tutorials-and-plugins/

來源

2012-01-10 01:57:03 DaveE

如何製作圖片瀏覽器？

回答

相關問題