JavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）

カルーセル画像は、フォト ギャラリーで使用されたり、現代の多くの Web サイトで大きな注目を集めたりして、注目の的となることがよくあります。これまで、CSS3 や JavaScript を操作するツールとして Adob​​e Flash がよく選ばれてきましたが、カルーセルは多くのコードを必要とせずに簡単に実装できます。

ここで使用したテクニックは、標準の JavaScript と CSS3 を使用して、優れたクロスフェード トランジションを備えたシンプルなカルーセルを実装する最も簡単な方法の 1 つです。

基本的な HTML は簡単です。いくつかの画像を div コンテナに入れるだけです:

<div class="slides">
  <img  src="image/cup.jpg"  alt="JavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）" >
  <img  src="image/flower.jpg" alt="JavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）" >
  <img  src="image/flowers.jpg" alt="JavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）" >
  <img  src="image/strawberry.jpg" alt="JavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）" >
  <img  src="image/greatwall.jpg" alt="JavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）" >
</div>

CSS を使用してコンテナ内にすべての画像をスタックし、トランジションを定義します (トランジションにはブラウザ固有のプレフィックスを使用する必要がある場合があります):

/* the slide container with a fixed size */
.slides {
  box-shadow: 0px 0px 6px black;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  position: relative;
  }
  /* the images are positioned absolutely to stack. opacity transitions are animated. */
  .slides img { 
  display: block;
  position: absolute; 
  transition: opacity 1s;
  opacity: 0;
  width: 100%;
  }
  /* the first image is the current slide. it's faded in. */
  .slides img:first-child { 
  z-index: 2; 
  /* frontmost */
  opacity: 1;
  }
  /* the last image is the previous slide. it's behind the current slide and it's faded over. */
  .slides img:last-child {
  z-index: 1; 
  /* behind current slide */
  opacity: 1;
  }

この簡単な設定の後は、カルーセルの順序を変更してカルーセル表示を進めるだけです。次のコード スニペットは、最初の画像 (現在の画像) をコンテナの最後に定期的に移動し、次の画像を現在の画像にします。上記で定義された CSS ルールにより、変更はクロスフェードでアニメーション化されます。

function nextSlide() {
    var q = function(sel) {
     return document.querySelector(sel); 
     }   
    q(".slides").appendChild(q(".slides img:first-child"));
    }
    setInterval(nextSlide, 3000)

上記はステップの分析です。以下は完全なコードです。

	
	
	


<div class="slides">
  <img  src="image/cup.jpg"  alt="JavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）" >
  <img  src="image/flower.jpg" alt="JavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）" >
  <img  src="image/flowers.jpg" alt="JavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）" >
  <img  src="image/strawberry.jpg" alt="JavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）" >
  <img  src="image/greatwall.jpg" alt="JavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）" >
</div>

結果は次のとおりです。

以上がJavaScriptとCSSで実装したシンプルなカルーセル画像再生エフェクト（ソースコード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。