CSSスライダー

JSを使用せずに、CSSアニメーションを使用して、スライダーを作成する簡単な方法を説明したいと思います。



1）最初に、HTMLを記述します。スライダーで4つの画像が互いに置き換えられると仮定します。

<div class="slider"> <div class="slide slide1"></div> <div class="slide slide2"></div> <div class="slide slide3"></div> <div class="slide slide4"></div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2）次に、ブロックサイズと、さらにいくつかの設定を作成しましょう。position：relativeは、フォーマットコンテキストを作成するために必要です。その理由は明らかです。

 .slider { width: 500px; height: 300px; margin: auto; margin-top: 25px; border: 1px solid black; position: relative; overflow: hidden; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3）スライド自体のいくつかのプロパティも定義します。

 .slide { width: 500px; height: 300px; position: absolute; top: 0; left: 0; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSSからわかるように、すべてのスライドをスライダーの左上隅に配置して、同じ初期位置を設定します。



4）次に、ギャップを作成せずにスライドが互いにどのように置き換えられるかを正確に決定する必要があります-各スライドに対して、次の一連のアクションを使用することにしました。



1.スライドは開始位置にあり、ユーザーに表示されます



2.スライドは、スライダーの境界を完全に超えるまで左に移動します（上記のように、スライダーはオーバーフロー：非表示になっており、スライドは周囲のオブジェクトにぶつかることはありません）。



3.次に、スライドの下側の境界がスライダーの上側の境界を超えるまでスライドが上に移動します



4.次に、スライドの左境界線がスライダーの右境界線を超えるまで、スライドを右に移動します



5.スライダーでスライドを1レベル下に移動します



6.スライドが元の位置に移動します。

言い換えると（これまでのところ、上記のリストの番号に従ってフレームに名前を付けます）：

 @keyframes slide { from { top: 0; left: 0; } 1 { transform: translate(0px, 0px); } 2 { transform: translate(-500px, 0); } 3 { transform: translate(-500px, 300px); } 4 { transform: translate(500px, 300px); } 5 { transform: translate(500px, 0); } to { transform: (0px, 0px); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

5）それで、スライドパスがどのように見えるかが明らかになりました。 各スライドは、コンテナ（スライダー）の周りを「循環」し、元に戻ります。 したがって、スライドを無制限にねじることができます。 ただし、このスキームで最も重要なのは時間です。 アニメーションストーリーボードを時間内に正しく計算し、スライドごとに正しい遅延を設定して、全員が同時にアニメーションを急がせるわけではないようにする必要があります。 遅延を正しく設定し、アニメーション時間を計算する方法を理解するために、以下に説明する方法を使用しました。



前の段落のステップ表記を使用して、各ステップで何が起こるかを見てみましょう。 実際、ステップ1、2、および6は、スライドが表示領域に入るステップです。 スライドが密接に移動しなければならず、スライダーからお互いを押し出さなければならないという事実から、ステップ2と6の継続時間は等しくすべきであると結論付けることができます。 最初のステップの期間が2番目と6番目の期間にも等しいという条件の下でのみ、この構造をうまく機能させたとすぐに言わなければなりません。 手順3、4、および5で行われるのは、本質的に技術的なニーズであり、簡単にするために、これら3つの手順を1に組み合わせてみましょう。



単純化した後、次のようになります。



1.ステップ-ソースにスライダーが表示されます

2.ステップ-スライダーが右に移動します

3.ステップ-スライダーは技術的な動きをします

4.ステップ-スライダーが左に移動し、開始位置に戻ります



連続したスライドショーを確保するには、スライドが手順2に進むと、次のスライドは手順4に進みます。



すなわち：







要するに、各ステージに必要な時間の割合を計算するために、ステップ1、2、および4が等しいという条件下で機能する小さな式を導き出しました。



時間の場合、アニメーション全体の円上-t;

スライドの数-n;

期間3ステップ-y;

ステップ1、2、および4の継続時間-x;

nスライドのアニメーション遅延ステップ-z;

それ：



y =（100 * n-150）/ n;

x =（100-y）/ 3;

xとyはパーセントに変換する必要があります。その後：

z = 2 * x * t;



上記の例のように、n = 4の場合、以下を取得します。



3番目のステップ-62.5％、1番目、2番目、4番目-12.5％。 後続の各スライドのアニメーション遅延ステップは25％です。



3番目のステップ内のステージ間の間隔は重要ではありません。



6）すべてを計算し、すべての値を知ったので、最終的なコードを提供できます。



アニメーション：

 @keyframes slide { from { top: 0; left: 0; } 12.5% { transform: translate(0px, 0px); } 25% { transform: translate(-500px, 0); } 36% { transform: translate(-500px, 300px); } 37% { transform: translate(500px, 300px); } 87.5% { transform: translate(500px, 0); } to { transform: (0px, 0px); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スライド：

 .slide1 { background: url(1.jpg); animation-delay: 7.5s; } .slide2 { background: url(2.jpg); animation-delay: 5s; } .slide3 { background: url(3.jpg); animation-delay: 2.5s; } .slide4 { background: url(4.jpg); animation-delay: 0s; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてのスライドに共通のCSS：

 .slide { width: 500px; height: 300px; position: absolute; top: 0; left: 0; animation-name: slid; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それだけです！ 最後まで読んでくれたみんなに感謝します。