JavaScriptカルーセル滞在エフェクトの実装について

次の記事では、JavaScript カルーセル滞在エフェクトの実装方法を説明します。カルーセル滞在は、どちらも属性と変数を使用して動きを制御し、カルーセルを実現します。興味のある方は、一緒に見てみましょう

1. アイデア

1. カルーセル ステイは、ワイヤレス スクロールと非常によく似ており、どちらも属性と変数を使用してカルーセルを実装します。カルーセル 滞在を再生するには、カルーセル滞在効果を実現するためのトランジション属性とタイマーを追加する必要があります

1. 追加の構造スタイルを作成する必要があります。最後に、切り替え時のジッターを解消するために最初の画像と同じです 2. 前の基礎で、インデックス サークルのデフォルト イベントをカルーセル ステイ イベントに追加します。 注: カルーセルが最後の画像に到達したとき、トランジションを削除する必要がある場合、ここでは setTimeout タイマーが使用されます。カードの最後の画像が回転された後に遅延はなく、最初の画像に直接ジャンプします。最初の画像は最後の画像と同じであるため、視覚的な盲点が形成されます。

//轮播停留方法
function move() {
 box.className = "box anmint";
 circle[count].style.backgroundColor = "";
 count++;
 box.style.marginLeft = (-800 * count) + "px";
 //最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换
 setTimeout(function () {
   if (count >= 6) {
    count = 0;
    box.className = "box";
    //marginLeft=0之前去除过渡属性
    box.style.marginLeft = "0px";
   }
  circle[count].style.backgroundColor = "red";
 }, 500);
}

3. これを追加します。基本的にフェードインおよびフェードアウトインデックスサークルイベントと同じです。違いは、ここではカルーセル滞在イベントを呼び出す必要がなく、画像が変換に従うように現在のインデックスを直接使用することです。

値は最後にマークする必要があります。これにより、デフォルトの動作が再度実行されると、現在表示されている画像の直後にデフォルトの動作が実行されます。

4. マウス入力と終了コードを改善します。

レンダリング:

完全なコード:

//进入索引圈事件
for(var j=0;j<circle.length;j++){
 circle[j].index=j;
 circle[j].onmouseenter=function(){
  for(var k=0;k<circle.length;k++){
   circle[k].style.backgroundColor="";
  }
  this.style.backgroundColor="red";
  //图片跟随移动
  box.className="box anmint";
  box.style.marginLeft=(-800*this.index)+"px";
  count=this.index;
 }
}

count=this.index

上記がこの記事の全内容です。その他の関連コンテンツについては、 に注目してください。 PHPの中国語サイトです！

関連する推奨事項:

vue.js カルーセル チャート コンポーネントの使用方法について

VUE 3D カルーセル チャートのカプセル化実装方法

以上がJavaScriptカルーセル滞在エフェクトの実装についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。