JavaScript で実装された 6 つの Web ページ画像カルーセル効果の詳細な説明

1. マウスがカルーセルモジュール上を通過すると、左右のボタンが表示され、モジュールを離れると、左右のボタンが非表示になります。
2. 小さな円を動的に生成する
3. 小さな円をクリックすると色が変わります。
4. 小さな円をクリックして画像をスクロールします
5. 右側のボタンを 1 回クリックすると、一度に 1 枚ずつ画像がスクロールします。
6. 右側のボタンをクリックすると、小さな円がそれに応じて変化します。
7. 左ボタンの機能作成
8. 自動再生機能

Web ページでは、さまざまなカルーセル効果をよく見かけます。これらはどのようにして実現されるのでしょうか?今日は一緒に見てみましょう！まず、いくつかの写真を用意する必要があります。ここでは 5 枚の写真を準備しました。

機能要件:

マウスがカルーセルモジュール上を通過すると、左ボタンと右ボタンが表示され、モジュールから離れると、左ボタンと右ボタンは非表示になります。

右側のボタンを 1 回クリックすると、画像が 1 つ左側に再生されます。左側のボタンについても同様です。

画像の再生中は、下の小さな円モジュールもそれに応じて変化します。

小さな円をクリックすると、対応する画像が再生されます。

マウスがカルーセル上を通過しなくても、カルーセルは自動的に写真を再生します。

マウスをカルーセルモジュール上に移動すると、自動再生が停止します。

ページのレイアウトは次のとおりです。

次に、段階的に機能を実装します。

まずHTMLページを作成する

実装プロセスは次のとおりです。まず大きなボックスを指定し、次に相対位置を指定して、後続のボックスの配置操作を容易にします。順序なしリストの形式で、画像を大きなボックスに追加します。実現したいカルーセル効果は水平方向であるため、画像に float:left 属性を追加できます。画像が配置されている ul の大きさが十分でないため、他の画像が下に押し込まれてしまうため、画像が配置されている ul のサイズを手動で変更できます。次に、順序なしリストを記述して小さな円を配置し、絶対位置指定によって大きなボックスの下に配置します。次に、小さな円を追加して、対応する小さな円をクリックすると対応する画像にジャンプする効果を実現できるようにします。次に、絶対配置を使用して、大きなボックスの両側の適切な位置に左矢印と右矢印を配置します。最後に、大きなボックスの外側のコンテンツを非表示にします。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <link rel="スタイルシート" href="index.css" rel="外部nofollow" >
</head>
<本文>
    <div class="box">
        <a href="" class = 'left jiantou'>&lt;</a>
        <a href="" class = 'right jiantou'>&gt;</a>
        <ul クラス = 'pic'>
            <li>
                <a href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" ><img src="./images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" ><img src="./images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" ><img src="./images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" ><img src="./images/4.jpg" alt=""></a>
            </li>
             <li>
                <a href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" ><img src="./images/5.jpg" alt=""></a>
            </li>
        </ul>
        <ul class="lis">
            <li></li>
            <li class = '選択済み'></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</本文>
</html>

cssファイル

*{
    マージン: 0;
    パディング: 0;
}
li{
    リストスタイル: なし;
}
。箱{
    位置: 相対的;
    オーバーフロー: 非表示;
    マージン: 100px 自動;
    幅: 520ピクセル;
    高さ: 280px;
    背景色: 赤;
}
.jiantou{
    フォントサイズ: 24px;
    テキスト装飾: なし;
    表示: ブロック;
    テキスト配置: 中央;
    幅: 20px;
    高さ: 30px;
    行の高さ: 30px;
    背景: rgba(158, 154, 154, 0.7);
    色: 白;
    zインデックス: 999;
}
。左{
    位置: 絶対;
    上: 125px;
    左: 0px;
    右上の境界線の半径: 15px;
    右下の境界線の半径: 15px;
}
。右{
    位置: 絶対;
    上:125px;
    左: 500ピクセル;
    左上の境界線の半径: 15px;
    左下の境界線の半径: 15px;
}
画像{
    幅: 520ピクセル;
    高さ: 280px;
}
.box .pic{
    幅: 600%;
}
.pic li {
    フロート: 左;
}
.lis{
   位置: 絶対;
   下: 15px;
   左: 50%;
   左マージン: -35px;
   幅: 70ピクセル;
   高さ:13px;
   境界線の半径: 7px; 
   背景: rgba(158, 154, 154, 0.7);
}
.lis li {
    フロート: 左;
    幅: 8px;
    高さ: 8px;
    マージン: 3px;
    境界線の半径: 50%;
    背景色: #fff;
   
}
.lis .selected{
    背景色: シアン;
}

ページ効果は次のようになります。

次にjs部分の機能を実装します。

1. マウスがカルーセルモジュール上を通過すると、左右のボタンが表示され、モジュールを離れると、左右のボタンが非表示になります。

まず、display:none を使用して最初の 2 つの矢印を非表示にします。次に、2 つの矢印と大きなボックスを取得し、マウスオーバーイベントとマウスリーブイベントを大きなボックスに追加します。以下のように表示されます。

 var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var box = document.querySelector('.box');
    box.addEventListener('mouseenter',function(){
        left.style.display = 'ブロック';
        right.style.display = 'ブロック';
    })
    box.addEventListener('mouseleave',function(){
        left.style.display = 'なし';
        right.style.display = 'なし';
    })

効果は次のとおりです。

2. 小さな円を動的に生成する

まず、図に示すように、小さな円 li をすべて削除します。

作成する小さな円は写真の数によって決まるため、私たちの基本的な考え方は、小さな円の数は写真の数と一致している必要があるということです。まず、ul 内の写真の数を取得し (写真は li に配置されるため、li の数になります)、次にループを使用して動的にノード createElement('li') を作成し、ノード ul. appendChild(li) を挿入して小さな円を生成します (この小さな円は ul に配置する必要があります)。最初の小さな円には、選択したクラスを追加する必要があることに注意してください。

実装コードは次のとおりです。

var pic = document.querySelector('.pic');
    var lis = document.querySelector('.lis');
    for(var i = 0;i<pic.children.length;i++){
        var li = document.createElement('li');
        lis.appendChild(li);
    }
    lis.children[0].className = '選択済み';

効果は次のとおりです。

3. 小さな円をクリックすると色が変わります。

小さな円を生成する際に、排他的なアイデアに基づいて小さな円にクリックイベントを追加します。対応する小さな円がクリックされると、選択したクラスがその小さな円に追加され、残りの小さな円から選択したクラスが削除されます。

コードは次のとおりです:

li.addEventListener('クリック',function(){
            (var i =0;i<lis.children.length;i++){
                lis.childern[i].className = '';
            }
            this.className = '選択済み';
        })

効果は次のとおりです。

4. 小さな円をクリックして画像をスクロールします

ここではアニメーション関数が使用されています。アニメーション関数をカプセル化する方法についてはすでに説明しました。ここでは繰り返さず、そのまま引用します。ただし、アニメーション関数の js ファイルを index.js の上に置くように注意してください。また、アニメーション機能は配置された要素が追加された後にのみ使用できるため、pic ul に配置も追加する必要があります。次に、ルールに従って、小さな円をクリックすると、ul のスクロール距離は、小さな円のインデックス番号に画像の幅を掛けたものになることがわかりました。 (画像は左に移動しているので、負の値です) そのため、小さな円のインデックス番号を知る必要があります。小さな円を生成するときにカスタム属性を設定し、クリックするとこのカスタム属性を取得できます。

まず、li を生成するときにインデックスを設定します。

li.setAttribute('index',i);

次に、li にクリックイベントを追加するときに、インデックスを取得し、画像の幅を取得し、アニメーション関数を呼び出します。

li.addEventListener('クリック',function(){
    var boxWidth = box.offsetWidth;
    //インデックス番号を取得します。var index = this.getAttribute('index');
    for(var i = 0;i<lis.children.length;i++){
        lis.children[i].className = '';
    }
    this.className = '選択済み';
    アニメーション(pic,-index*boxWidth)
})

効果は次のとおりです。

5. 右側のボタンを 1 回クリックすると、一度に 1 枚ずつ画像がスクロールします。

右ボタンにクリックイベントを直接追加し、変数 num を宣言して、それを 1 回クリックし、1 ずつ増やすことができます。この変数に、ul のスクロール距離である画像の幅を掛けます。

var 数値 = 0;
    right.addEventListener('click',function(){
        数値++;
        アニメーション化(pic,-num*boxWidth);
    })

効果は次のとおりです。

右側のボタンをクリックすると、画像切り替え効果が得られますが、最後の画像をクリックすると、表示ページの初期の背景にとどまり、美しくないことがわかりました。そこで、画像のシームレススクロールの原理を使用して、画像をシームレスにスクロールさせることができます。操作方法は次のとおりです。 cloneNode(true) を介して .pic リストの最初の li のコピーを追加し、appendChild() を介してリストの末尾にコピーします。次に、js ページの num に判定条件を追加します。つまり、num の値が「このリストの要素数 - 1」に等しい場合、ul が移動した距離が 0 になり、num が 0 になります。

コードは次のとおりです:

var first = pic.children[0].cloneNode(true);
    pic.appendChild(最初の子);
    //右ボタンの機能 var num = 0;
    right.addEventListener('click',function(){
        if(num == pic.children.length-1){
            pic.style.left = 0;
            数値 = 0;
        }
        数値++;
        アニメーション化(pic,-num*boxWidth);
    })

効果は次のとおりです。

成功しました。

6. 右側のボタンをクリックすると、小さな円がそれに応じて変化します。

必要なことは、別の変数circleを宣言し、右ボタンがクリックされるたびにそれを1ずつ増やすことです。この効果は左ボタンをクリックしたときにも達成されるため、この変数も必要なので、グローバル変数を宣言する必要があります。しかし、絵は5枚あり、小さい円は1つ少ない4つしかないので、判定条件を追加する必要があります。円==4の場合は、0に戻ります。

 var 数値 = 0;
var 円 = 0;
  right.addEventListener('click',function(){
      if(num == pic.children.length-1){
          pic.style.left = 0;
          数値 = 0;
      }
      数値++;
      アニメーション化(pic,-num*boxWidth);
      サークル++;
      if(circle == lis.children.length){
          円 = 0;
      }
      (var i =0;i<lis.children.length;i++){
          lis.children[i].className = '';
      }
      lis.children[circle].className = '選択済み';
  })

実行結果は次のとおりです。

しかし、まだいくつか小さな問題があります。小さな円を右側のボタンと組み合わせると、次のようなエラーが発生します。

小さな点をクリックすると、対応する画像ページにジャンプすることもできますが、右側のボタンをクリックし続けると、下の小さな点が対応する画像に対応していないことがわかります。これは、右ボタンをクリックしたときに変数 num によって制御されますが、num 変数は小さな円のクリックイベントとは関係がないため、違いがあります。

私たちの解決策は、小さな li がクリックされるたびにインデックス番号を取得し、num と circle の値を取得したインデックス番号の値に変更することです。コードは次のとおりです。

var index = this.getAttribute('index');
num = インデックス;
円 = インデックス;

効果は次のとおりです。

7. 左ボタンの機能作成

方法は右側のボタンと似ているので、詳細は説明しません。コードは次のとおりです。

left.addEventListener('click',function(){
        if(数値 == 0){
            num = pic.children.length-1;
            pic.style.left = -num*boxWidth+'px';
            
        }
        数値--;
        アニメーション化(pic,-num*boxWidth);
        丸 - ;
        if(円 <0){
            円 = lis.children.length-1;
        }
        (var i =0;i<lis.children.length;i++){
            lis.children[i].className = '';
        }
        lis.children[circle].className = '選択済み';
    })

効果は次のとおりです。

8. 自動再生機能

実際、カルーセルを自動的に再生するタイマーを追加することは、右側のボタンをクリックするのと似ています。このとき、右ボタンのクリックイベント right.click() を手動で呼び出します。マウスが画像の上を通過するとタイマーが停止し、マウスが画像から離れるとタイマーが開始されます。

var タイマー = this.setInterval(function(){
  右クリック();
 },2000)

効果は次のとおりです。

完全な index.js コードは次のとおりです。

window.addEventListener('load',function(){
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var box = document.querySelector('.box');
    box.addEventListener('mouseenter',function(){
        left.style.display = 'ブロック';
        right.style.display = 'ブロック';
    })
    box.addEventListener('mouseleave',function(){
        left.style.display = 'なし';
        right.style.display = 'なし';
    })
    var pic = document.querySelector('.pic');
    var lis = document.querySelector('.lis');
    var boxWidth = box.offsetWidth;
    for(var i = 0;i<pic.children.length;i++){
        
        var li = document.createElement('li');
        lis.appendChild(li);
        //インデックス番号を設定します li.setAttribute('index',i);
        li.addEventListener('クリック',function(){
            //インデックス番号を取得します。var index = this.getAttribute('index');
            num = インデックス;
            円 = インデックス;
            for(var i = 0;i<lis.children.length;i++){
                lis.children[i].className = '';
            }
            this.className = '選択済み';
            アニメーション(pic,-index*boxWidth)
        })
    }
    lis.children[0].className = '選択済み';
    //最初のliを複製する
    var first = pic.children[0].cloneNode(true);
    pic.appendChild(最初の子);
    var 数値 = 0;
    var 円 = 0;
    //右ボタンの機能right.addEventListener('click',function(){
        if(num == pic.children.length-1){
            pic.style.left = 0;
            数値 = 0;
        }
        数値++;
        アニメーション化(pic,-num*boxWidth);
        サークル++;
        if(circle == lis.children.length){
            円 = 0;
        }
        (var i =0;i<lis.children.length;i++){
            lis.children[i].className = '';
        }
        lis.children[circle].className = '選択済み';
    })
    //左ボタン関数 left.addEventListener('click',function(){
        if(数値 == 0){
            num = pic.children.length-1;
            pic.style.left = -num*boxWidth+'px';
            
        }
        数値--;
        アニメーション化(pic,-num*boxWidth);
        丸 - ;
        if(円 <0){
            円 = lis.children.length-1;
        }
        (var i =0;i<lis.children.length;i++){
            lis.children[i].className = '';
        }
        lis.children[circle].className = '選択済み';
    })
    var タイマー = this.setInterval(function(){
        右クリック();
    },2000)
})

これまで、カルーセルのすべての機能が実現されました。習得できましたか?

上記は、JavaScript を使用して 6 種類の Web ページ画像カルーセル効果を実現する方法の詳細な説明の詳細な内容です。JavaScript Web ページ画像カルーセルの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: