JavaScriptカルーセル滞在エフェクトの実装について-jsチュートリアル-php.cn

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

不言

リリース： 2018-07-04 10:22:53

オリジナル

1208 人が閲覧しました

次の記事では、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の中国語サイトです！