イメージビューアを作成するにはどうすればよいですか？

私は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

しかし、今問題はページをリロードするたびにスライドショーを最初のイメージに置くことになります。 – Maansahir

おっと、 'NaN'チェッカーを入れるのを忘れてしまいました。今はうまくいくはずです。 – Aaron

このようなプロジェクトにはjQueryプラグインを使用し、必要に応じてカスタマイズすることをお勧めします。ここで

あなたが見つめていた取得するためのリンクです：http://www.designsmag.com/2011/06/50-jquery-image-gallery-tutorials-and-plugins/

出典

2012-01-10 01:57:03 DaveE

イメージビューアを作成するにはどうすればよいですか？

答えて

関連する問題