HTML、CSS、JavaScriptを使用して自動画像ギャラリーのスライドショーを作成する方法

Question

これは機能しません。

イメージが右にスライドするウェブサイトを構築しようとしています。私は前の投稿から解決策を試しましたが、それでもまだ仕事はありませんでした。

(function() { 
 
    var imgLen = document.getElementById('imgGallary'); 
 
    var images = imgLen.getElementsByTagName('img'); 
 
    var counter = 1; 
 

 
    if (counter <= images.length) { 
 
     setInterval(function() { 
 
      images[0].src = images[counter].src; 
 
      console.log(images[counter].src); 
 
      counter++; 
 

 
      if (counter === images.length) { 
 
       counter = 1; 
 
      } 
 
     }, 4000); 
 
    } 
 
})();

.container{ 
 
      position:relative; 
 
      width:600px; 
 
      height:330px; 
 
      border-radius:5px; 
 
      border:4px solid black; 
 
      overflow:hidden; 
 
      margin-left:320px; 
 
     } 
 
#imgGallary > img 
 
{ 
 
    width:700px; 
 
    height:330px; 
 
}

<div id="imgGallary" class="container"> 
 
       <img src="image/lake-louise-51543_960_720.jpg" /> 
 
       <img src="image/snow-in-pine-tree-1265118__340.jpg" /> 
 
       <img src="image/winter-385640_960_720.jpg"/> 
 
      </div>

Answer 1

これは、あなたが正しくで来ていない最初の画像で抱えている問題を修正する必要があります。 HTMLとCSSを同じにしておきます。 JavaScriptを変更します。ここではwindow.onloadを使用していますが、あなたの自己呼び出しメソッドもうまくいくと思います。それを右にスライドさせることについては、あなたが設定する方法は非常に禁止的です。私はクローンを作成してクローンをスライドしようとしましたが、それが価値のないものになるような矛盾があります。

イメージをスライドさせたい場合は、実際には別のルートを使用します。 src属性を変更するのではなく、絶対位置指定とz-インデックスを使用してイメージを重ね合わせるだけです。その後、オーバーフロープロパティを取り除き、画像にボーダーを適用するか、またはdiv画像（background：url（ 'lake.jpg'）center center no-repeat）としてそれらの画像を設定する方が良いでしょう。あなたはそれらのサイジングについて心配する必要もなく、歪んでしまうこともありません。 CSSでは、各divに "transform 0.25s"のトランジション（またはその効果）を与えます。次に、javascriptでトランスフォームを適用して右にスライドさせることができます。それらを元に戻すには、単にトランジション値を取り除き、変換値0を画像に割り当てますが、Z-インデックスが現在表示されているイメージよりも小さいことを確認してください。変換ルートを使用する場合は、-ms-と-webkit-というプレフィックスを追加して、古いブラウザからアクセスできるようにしてください。http://caniuse.com/#search=transform

とにかく、これは単なる考えです。間違った画像を読み込んで問題を解決するコードは次のとおりです。ちなみに、私は複雑なCSS規則のためにjQueryを次回使用することを検討します（あなたが私のルートに行くことを決めた場合）。がんばろう！

JS

window.onload = function() { 

    var imgLen = document.getElementById('imgGallary'); 
    var images = imgLen.getElementsByTagName('img'); 
    var counter = 1; 

    //Store the src attributes in an array 
    var src = []; 

    for (var i = 0; i < images.length; i++) { 
     src[i] = images[i].src; 
    } 

    console.log(src); 

    setInterval(function() { 

     if (counter < images.length) { 

      images[0].src = src[counter]; 
      console.log(src[counter]); 
      counter++; 


     } 

     // Here we're saying if the counter is equal to the length of images, go back to the first images 
     // and reset the counter. 
     else { 

      images[0].src = src[0]; 
      console.log(src[0]); 
      counter = 1; 

     } 

     }, 4000); 

} 

Answer 2

あなたが最初の画像タグに新しいsrc値を代入すると、そのタグのオリジナルsrc値を取り戻すことはできません。

imgタグをsrc属性で作成する必要があります。そのため、そのタグにsrc値を割り当てることができます。

(function() { 
 
    var imgLen = document.getElementById('imgGallary'); 
 
    var images = imgLen.getElementsByTagName('img'); 
 
    var counter = 1; 
 

 
    if (counter <= images.length) { 
 
     setInterval(function() { 
 
      images[0].src = images[counter].src; 
 
      console.log(images[counter].src); 
 
      counter++; 
 

 
      if (counter === images.length) { 
 
       counter = 1; 
 
      } 
 
     }, 1000); 
 
    } 
 
})();

.container{ 
 
      position:relative; 
 
      width:600px; 
 
      height:330px; 
 
      border-radius:5px; 
 
      border:4px solid black; 
 
      overflow:hidden; 
 
      margin-left:320px; 
 
     } 
 
#imgGallary > img 
 
{ 
 
    width:700px; 
 
    height:330px; 
 
}

<div id="imgGallary" class="container"> 
 
       <img /> 
 
       <img src="http://placehold.it/350?text=img1" /> 
 
       <img src="http://placehold.it/350?text=img2" /> 
 
       <img src="http://placehold.it/350?text=img3"/> 
 
      </div>