1

とてもシンプルな画像ギャラリーを作ろうとしています。ほとんどのデザインはすでに完成しています（JQueryを使用）...しかし今、私は画像を変更するために必要なロジックを考えようとしています。この部分では、単純にするために、Jqueryの代わりにjavaScriptを使用することを考えていました。私はjavaScript構文にあまり精通していませんが、これが私の試みです。これは、画像ギャラリーを作成するための実行可能な方法ですか？画像を背景にするのは良い考えではないことは知っていますが、テスト目的では、画像を切り抜くような気がしません。そのため、画像を背景として設定すると、画像が適切にトリミングされます。

また、最初にImageCntをゼロに設定する方法についても考えていました...ページの読み込み時にonload関数を使用してImageCntを0に設定できますか？varをnext（）に渡すことはできますか？もしそうなら、私は現在のImageCntをonClickから関数に渡すことができます。

PS。読みやすくするために多くのコードを省略しましたが、必要に応じてさらに提供することができます。

ありがとう！これが私のコードです：

Javascript

<script>
  function next()
  {
    var myImage= new Array(); 
    myImage[0]="penguins.jpg";       
    myImage[1]="desert.jpg";
    myImage[2]="jellyfish.jpg";
    myImage[3]="flower.jpg"; 

    ImageCnt++;

    document.getElementById("whiteBox").style.background = 'url(myImage[ImageCnt])';
  }
</script>

html

<a href="#" onclick="next()"><img src="next.png"/></a>
4

2 に答える 2

3

最も重要なことは、以下に示すように、さまざまな部分を連結（ "+"演算子）して、backgroundプロパティを構築する必要があります。そうしないと、静的な文字列にした場合、配列の値に置き換えられません。

また、グローバルスコープを使用して、イメージ配列とカウンターを宣言および初期化します。

<script>
var myImage= new Array(); 
myImage[0]="penguins.jpg";       
myImage[1]="desert.jpg";
myImage[2]="jellyfish.jpg";
myImage[3]="flower.jpg"; 

var ImageCnt = 0;

function next(){
    ImageCnt++;
    document.getElementById("whiteBox").style.background = 'url(' + myImage[ImageCnt] + ')';
  }
</script>

最後に、onclickからfalseを返します。そうでない場合は、ページをリロードします。

<a href="#" onclick="next();return false;"><img src="next.png"/></a>
于 2013-01-13T02:04:35.380 に答える
3

これは、 http： //extremestudio.ro/から取得した、私が見つけた単純なインラインの非jQuery画像ギャラリーの最良の例です。

<!DOCTYPE html PUBLIC>
<html>
  <head>
    <title>
      Simple and Effective Photo Gallery with HTML and JavaScript
    </title>

    <style type="text/css">
      body {
        background: #222;
        margin-top: 20px;
      }

      h3 {
        color: #eee;
        font-family: Verdana;
      }

      .thumbnails img {
        height: 80px;
        border: 4px solid #555;
        padding: 1px;
        margin: 0 10px 10px 0;
      }

      .thumbnails img:hover {
        border: 4px solid #00ccff;
        cursor:pointer;
      }

      .preview img {
        border: 4px solid #444;
        padding: 1px;
        width: 400px;
      }
    </style>
  </head>

  <body>
    <div class="gallery" align="center">
      <h3>Simple and Effective Photo Gallery with HTML and JavaScript</h3><br/>

      <div class="thumbnails">
        <img onmouseover="preview.src=img1.src" id="img1" src="http://bit.ly/2rz3hy" alt="Image Not Loaded"/>
        <img onmouseover="preview.src=img2.src" id="img2" src="http://bit.ly/1ug1e6" alt="Image Not Loaded"/>
        <img onmouseover="preview.src=img3.src" id="img3" src="http://bit.ly/1yIAYc" alt="Image Not Loaded"/>
        <img onmouseover="preview.src=img4.src" id="img4" src="http://bit.ly/2LHyDW" alt="Image Not Loaded"/>
        <img onmouseover="preview.src=img5.src" id="img5" src="http://bit.ly/2wyHSR" alt="Image Not Loaded"/>
        <img onmouseover="preview.src=img6.src" id="img6" src="http://bit.ly/yRo1i" alt="Image Not Loaded"/>
      </div><br/>

      <div class="preview" align="center">
        <img id="preview" src="http://bit.ly/2rz3hy" alt="No Image Loaded"/>
      </div><br/>
    </div>
  </body>
</html>

唯一のJavaScriptはタグに埋め込まれていますが、柔軟性を高めるためにスクリプトタグに簡単に移動できます。

于 2014-02-24T00:32:52.380 に答える