シンプルなカルーセル効果を実現するJavaScript

カルーセルとは何ですか?

カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリックするか、携帯電話で指をスライドさせることで、複数の画像を表示できます。これらの画像はすべてカルーセル画像であり、このモジュールはカルーセルモジュールと呼ばれます。

カルーセルの実装方法

以下のような、画像に対応する小さなドットを自動的に生成し、左右の矢印をクリックして前または次の画像にジャンプし、数秒ごとに自動的に回転し、小さなドットをクリックして指定された画像に移動できるカルーセルを js で作成するにはどうすればよいですか。

HTML構造

まず、HTML ページを作成します。構造は非常にシンプルです。大きな div を使用して 2 つの div をネストし、slider という名前を付けます。上の div は画像を保持するために使用され、slider-img という名前が付けられます。下の div はコントロールで、ボタンと、上と下の画像の小さなドットを保持するために使用されます。これは slider-ctrl と呼ばれます。

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <link rel="スタイルシート" href="css/index.css"/>
    <script src="../public.js"></script>
    <script src="./js/index.js"></script>
</head>
<本文>
    <div class="スライダー" id="スライダー">
        <div class="slider-img">
            <ul>
                <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
            </ul>
        </div>
        <div class="slider-ctrl">
        //ここで小さなドットを自動的に生成します<span class="prev" id="prev"></span>
            <span class="next" id="next"></span>
        </div>
    </div>
</本文>
</html>

CSSコード

CSS コードは非常にシンプルで簡潔です。

* {
    マージン: 0;
    パディング: 0;
}
.スライダー{
    幅: 310ピクセル;
    高さ: 265px;
    マージン: 100px 自動;
    位置: 相対的;
    オーバーフロー: 非表示;
}
.スライダー画像 {
    幅: 310ピクセル;
    高さ: 220px;
}
ul {
    リストスタイル: なし;
}
li {
    位置: 絶対;
    上: 0;
    左: 0;
}
.スライダー-ctrl {
    テキスト配置: 中央;
    パディング上部: 10px;
}
.スライダーコントロールコン{
    表示: インラインブロック;
    幅: 24px;
    高さ: 24px;
    背景: url(../images/icon.png) 繰り返しなし -24px -780px;
    テキストインデント: -99999px;
    マージン: 0 5px;
    カーソル: ポインタ;
}
.slider-ctrl-con.current {
    背景位置: -24px -760px;
}
.前へ,.次へ {
    位置: 絶対;
    上位: 40%
    幅: 30ピクセル;
    高さ: 35px;
    背景: url(../images/icon.png) 繰り返しなし;
}
.前へ {
    左: 10px;
}
。次 {
    右: 10px;
    背景位置: 0 -44px;
}

jsコード

まず、需要分析を行って考えを明確にし、次にコードを段階的に記述する必要があります。まず関連する要素を取得し、次に写真の数に応じて対応する小さなドットを生成します。写真は積み重ねられているため、他の写真を右側に配置して非表示にし、最初の写真のみを表示します。次に、最初の小さな点を点灯して、小さな点と画像が結合されていることを確認する必要があります。次に、右矢印をクリックすると次の画像が表示され、左矢印をクリックすると前の写真が表示され、小さな点をクリックすると対応する画像が表示され、対応する画像が点灯している必要があることを認識する必要があります。最後に、画像を自動的に回転させて、マウスが内側に移動すると回転を停止し、マウスが外側に移動すると回転を継続するようにします。

window.onload = 関数(){
    // 0 関連要素を取得 // 合計コンテナ var slider = document.getElementById('slider');
    // すべての画像のコレクション li var imgLiS = slider.children[0].children[0].children;
    //コントロールボタンのコンテナ var ctrlDiv = slider.children[1];
    //左矢印（前のボタン）
    var 前 = document.getElementById('前')
    // 右矢印（次へボタン）
    var next = document.getElementById('next')
    // コンテナの幅 var width = slider.offsetWidth;
    // 変数を使用して、現在表示されている画像のインデックスを記録します。var index = 0;

    // 1 写真の数に応じて対応する小さな点を生成します for(var i=imgLiS.length-1;i>=0;i--){
        var newPoint = document.createElement('span');
        // 後でクリックしたときにノード番号がわかるように、各ノードのノード番号を記録します。 newPoint.className = "slider-ctrl-con";
        新しいポイント。
        // 先頭に配置する ctrlDiv.insertBefore(newPoint,ctrlDiv.children[0])

        // 2 すべての画像は右側に配置されます imgLiS[i].style.left = width+"px"
    }

    // 2 カルーセルに最初の画像が表示されます imgLiS[index].style.left = 0;

    // すべての小さなドットを取得します var ctrlS = ctrlDiv.children;
    // 3 最初のドットを点灯する light()

    // 4 左矢印をクリックすると前の画像が表示され、対応するドットが点灯します。prev.onclick = prevImg;

    // 5 右矢印をクリックすると次の画像が表示され、対応するドットが点灯します。 next.onclick = nextImg;

    // 6 小さな点をクリックすると点灯し、対応する画像が表示されます for(var i=0;i<imgLiS.length;i++){
        ctrlS[i].onclick = 関数(){
            var num = +this.innerHTML;
            if(num>index){
                // 次の画像は右側にあると思います imgLiS[num].style.left = width+"px";
                // 現在の画像を左に移動する move(imgLiS[index],'left',-width)
                // 見たい画像は真ん中に移動します move(imgLiS[num],'left',0)                
            }
            if(num<index){
                // 前の画像は左側にあると思います imgLiS[num].style.left = -width+"px";
                // 現在の画像を右に移動する move(imgLiS[index],'left',width)
                // 見たい画像は真ん中に移動します move(imgLiS[num],'left',0)                
            }

            // インデックスを更新
            インデックス = 数値;
            // ドットライトを点灯する()
        }
    }

    // 7 は画像を自動的に回転できます: 3 秒ごとに次の画像を表示します var timer = setInterval(nextImg,3000)
    // 8 マウスを動かしてカルーセルを停止する slider.onmouseenter = function(){
        クリアインターバル(タイマー)
    }
    // 9 マウスを外側に動かしてカルーセルを続行します slider.onmouseleave = function(){
        クリアインターバル(タイマー)
        タイマー = setInterval(nextImg,3000)
    }
    
    
    
    // ドットの点灯は複数回実行されるため、関数にカプセル化します。 function light(){
        for(var i=0;i<imgLiS.length;i++){
            ctrlS[i].className = "スライダーctrl-con"
        }
        ctrlS[index].className = "スライダーctrl-con現在の"
    }

    //前の写真を見る関数 function prevImg(){
        var num = インデックス-1;
        if(数値<0){
            // 最小インデックスは 0 です。表示するインデックスが 0 未満の場合、それは最後の画像、つまり length-1 番目の画像です。num = imgLiS.length-1;
        }
        // 前の画像は左側にあるはずです imgLiS[num].style.left = -width+"px";
        // 現在の画像は右に移動します move(imgLiS[index],'left',width)
        // 画像を中央に移動する move(imgLiS[num],'left',0)
        // 移動が完了すると、コンテナは画像 num を表示します // したがって、現在のインデックスを記録するインデックスの値は num になります
        インデックス = 数値;
        ライト（）

    }

    // 次の画像を表示する関数 function nextImg(){
        var num = インデックス + 1;
        if(num>imgLiS.length-1){
            数値 = 0;
        }
        // 次の要素は右側にあるはずです imgLiS[num].style.left = width+"px";
        // 現在の画像を左に移動する move(imgLiS[index],'left',-width)
        // 次に見たい画像は真ん中に移動します move(imgLiS[num],'left',0)
        // インデックスの値を更新します。index = num;
        ライト（）
    }

}

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

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