カルーセル効果を作成するためのjs

カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイントがたくさんあるからです。以下はカルーセルの作り方を学ぶプロセスです。

困難：

1. 以下の対応する円と画像を動的に自動生成する方法
2. 下の円を絵に合わせる方法
3. 前のページと次のページのボックスが移動する距離
4. 画像切り替え時のフェードアウトアニメーション効果
5. スロットルバルブの概念

効果：

コード：

<!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>
    <スタイル>
        * {
            パディング: 0;
            マージン: 0;
        }
 
        {
            テキスト装飾: なし;
            色: 白;
            行の高さ: 50px;
            テキスト配置: 中央;
        }
 
        li {
            リストスタイル: なし;
        }
 
        .tb-プロモーション {
            位置: 相対的;
            幅: 700ピクセル;
            高さ: 300px;
            マージン: 自動;
            オーバーフロー: 非表示;
        }
 
        .tb-プロモ .imgg {
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 3000ピクセル;
        }
 
        .tb-promo .imgg li {
            フロート: 左;
 
 
        }
 
        .tb-promo .imgg li img {
            幅: 700ピクセル;
            高さ: 300px;
        }
 
        .tb-プロモ .prev {
            表示: なし;
            位置: 絶対;
            上: 125px;
            左: 0;
            幅: 25px;
            高さ: 50px;
            背景色: rgba(0, 0, 0, 0.2);
            右上の境界線の半径: 25px;
            右下の境界線の半径: 25px;
            zインデックス: 999;
        }
 
        .tb-promo .prev:hover {
            背景色: rgba(0, 0, 0, 0.5);
        }
 
        .tb-プロモ .next {
            表示: なし;
            位置: 絶対;
            上: 125px;
            右: 0;
            幅: 25px;
            高さ: 50px;
            背景色: rgba(0, 0, 0, 0.2);
            左上の境界線の半径: 25px;
            左下の境界線の半径: 25px;
            zインデックス: 999;
        }
 
        .tb-promo .next:hover {
            背景色: rgba(0, 0, 0, 0.5);
        }
 
        .tb-プロモ .プロモ-nav {
            位置: 絶対;
            上: 270px;
            左: 50%;
            左マージン: -40px;
 
            高さ: 25px;
 
        }
 
        .tb-promo .promo-nav li {
            フロート: 左;
            幅: 16px;
            高さ: 16px;
            背景色: 白;
            境界線の半径: 8px;
            マージン: 4px;
 
 
        }
 
        .tb-プロモ .プロモnav .one {
 
            背景色: トマト;
        }
    </スタイル>
</head>
 
<本文>
    <div class="tb-promo">
 
        <a href="javascript:;" class="prev"><</a>
                <a href="javascript:;" class="next">></a>
                <ul class="imgg">
                    <li><img src="./61.jpeg" alt=""></li>
                    <li><img src="./62.jpeg" alt=""></li>
                    <li><img src="./63.jpeg" alt=""></li>
 
                </ul>
                <ol class="promo-nav">
 
 
 
                </ol>
    </div>
    <スクリプト>
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var tbpromo = document.querySelector('.tb-promo');
        var ul = document.querySelector('ul');
        var ol = document.querySelector('ol');
        //アニメーション関数 function animate(obj, target) {
            clearInterval(obj.timer); // 複数回のクリックを防ぐために呼び出します obj.timer = setInterval(function () {
                var ステップ = (ターゲット - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step); // 正と負の値を丸める if (obj.offsetLeft == target) {
                    タイマー間隔をクリアします。
                } それ以外 {
                    obj.style.left = obj.offsetLeft + ステップ + 'px';
                }
            }, 10)
        }
 
        // 動的なナビゲーション サークルを生成します var tbpromWidth = tbpromo.offsetWidth;
        (var i = 0; i < ul.children.length; i++) の場合 {
            var li = document.createElement('li');
            ol.appendChild(li);
            //カスタム属性を通じてインデックス番号を記録します li.setAttribute('index', i);
            //円の色の変更を記述するための独自のアイデア li.addEventListener('click', function () {
                // すべての円の色をクリアします for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'one';
 
                var index = this.getAttribute('index');
                // li をクリックし、li のインデックス番号をコントロール変数に割り当てます。num = index;
                円=インデックス;
                アニメーション化(ul, -index * tbpromWidth);
 
 
            })
            ol.children[0].className = 'one';
        }
        //最初の画像 li を複製し、シームレスに切り替えるために最後に配置します。var frist = ul.children[0].cloneNode(true);
        ul.appendChild(frist);
 
 
        //次のページと前のページを非表示にして表示する tbpromo.addEventListener('mouseenter', function () {
            prev.style.display = 'ブロック';
            next.style.display = 'ブロック';
            タイマーの間隔をクリアします。
            timer=0; // タイマー変数をクリアする })
        tbpromo.addEventListener('mouseleave', 関数() {
            prev.style.display = 'なし';
            next.style.display = 'なし';
            タイマー = setInterval(関数() {
            next.click(); // クリックイベントを手動で呼び出す}, 1500)
 
        })
 
        //次の前のアニメーション var num = 0;
        // 制御円 var circle = 0;
        //スロットルバルブ変数 var flag=true;
        
        //次のページ next.addEventListener('click', function () {
           
                //最後はulを判断してleftを0に戻す
            num == (ul.children.length - 1) の場合 {
                ul.style.left = 0;
                数値 = 0;
            }
            
                数値++;
                アニメーション化(ul, -num * tbpromWidth);
                サークル++;
                （円 == 3）の場合{
                    円 = 0;
                }
                (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[circle].className = 'one';
           
            
        })
        //前のページ prev.addEventListener('click', function () {
            
            数値 == 0 の場合
                num = ul.children.length-1;
                ul.style.left = -num*tbpromWidth+'px';
                
            }
            それ以外 {
                数値--;
                アニメーション化(ul, -num * tbpromWidth);
                丸 - ;
                （円<0）の場合{
                    円 = 2;
                }
                (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[circle].className = 'one';
            }
        })
        //自動再生 var timer = setInterval (function () {
            next.click(); // クリックイベントを手動で呼び出す}, 2000)
    </スクリプト>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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