jsを使用してカルーセル効果を実現する

今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体的な内容は次のとおりです。

アイデア

1. まず必要な要素を入手する必要があります

<div class="all" id="box">
        <div class="screen">
            <!-- 順序なしリスト -->
            <ul> 
                <li><img src="./wf1.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="./wf2.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="./wf3.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="./wf4.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="./wf5.jpg" 幅="500" 高さ="200" /></li>
            </ul>
            <!-- 順序付きリスト -->
            <オル>
 
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>

2. スライドショーはクリックした場所すべてで実行され、色も変わります

3.カルーセルに左右の矢印キーを追加して上下に切り替えます

4. カルーセルを自動で動かす

操作する

1. まず必要な要素とカルーセル効果を入手します

1. まず、必要な ul (写真)、ol (クリックボックス)、nth (左ボタンと右ボタン) を取得します。

var ul = document.querySelector('ul')
var ol = document.querySelector('ol')
var nth = document.querySelector('#arr')
var ボックス = document.querySelector('#box')
var 左 = document.querySelector('#left')
var right = document.querySelector('#right')

2. 後で使用するアニメーション効果をカプセル化する

 // 位置アニメーションのカプセル化を実行する function animate(element,offset,setp,times){
                    // 複数のトリガーを防ぐためにtrueの場合は削除します if(element.jsq){
                        クリア間隔(element.jsq)
                    }
                    // 現在のオフセットを取得する
                    var 位置 = ul.offsetLeft
                    // 移動位置が現在の位置より小さい場合、ステップ長は負になります if (offset < position) {
                        setp=-setp
                    }
                    // ギャップタイマーを開始します if(Math.abs(position-offset)>Math.abs(setp)){
                        要素.jsq = setInterval(() => {
                        位置+=setp
                        element.style.left=位置+'px'
                        // 現在の位置値が事前設定された位置の1ステップ以内の場合、タイマーを停止します。if (Math.abs(position-offset)<Math.abs(setp)){
                            クリア間隔(element.jsq)
                            element.style.left=オフセット+'px'
                        }
                    }, 回);
                    }
                }

アニメーションの手順:

1. パスイン時にタイマーの有無を確認します。タイマーがある場合は、複数のタイマーが共存しないようにクリアします。

2. 移動先の位置が元の位置より大きいかどうかを判断します。大きい場合は、setp によって位置が増加します。小さい場合は、毎回ステップサイズを減算します。

3. タイマーをスタートして移動する

4. 現在の位置と所定の位置との距離がステップ長未満になると、タイマーが終了し、位置が所定の位置に設定され、横方向への繰り返しのジャンプが防止されます。

2. コンテンツを追加し、クリックイベントを追加し、画像を移動し、ボタンの色を変更します

for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // 各 li のカスタム属性を設定します li.setAttribute('a',i)
            ol.appendChild(li)
            // ol の下の各 li にクリックイベントを設定します ol.children[i].onclick=function(){
                // li が排他的思考を実行するようにループします for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // 現在クリックされている要素にクラス属性 this.className='current' を追加します
                // 現在クリックされている li のカスタム属性の値を取得して、どれがクリックされたかを確認します var index=this.getAttribute('a')
                コンソール.log(インデックス)
                // 各写真の幅をチェックする var imgwidth = ul.children[0].offsetWidth
                // 幅にフレーム数を掛けて移動量を取得します。 offset = index * - imgwidth
                //アニメーション関数を呼び出す animate(ul,offset,50,30)

1. for ループを使用して、写真の数と同じ数のボタンを作成します。setAttribute ('a', i)を使用して新しいカスタム属性を作成し、ol に追加します。これは後で必要になります。

for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // 各 li のカスタム属性を設定します li.setAttribute('a',i)
            ol.appendChild(li)
}

2. このループ内のすべてのボタンにバインディングイベントを追加して、現在のボタンの色が変わり、他のボタンは色が付かないようにする。独自のアイデアで、クリックするたびに現在のボタンに色が付き、他のボタンはクリアされます。

for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // 各 li のカスタム属性を設定します li.setAttribute('a',i)
            ol.appendChild(li)
 
        //新規// 以下の各liにクリックイベントを設定します ol.children[i].onclick=function(){
                // li が排他的思考を実行するようにループします for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // 現在クリックされている要素にクラス属性 this.className='current' を追加します

3.現在クリックされている要素のカスタム属性の値を取得して保存し、それを使用してページのオフセットを設定します。現在クリックされている値に各写真を掛けて、 ul のオフセットを取得します。 ul はビューポートではなく左に移動する必要があるため、マイナス記号を追加することを忘れないでください。次に、前に記述したアニメーション関数を呼び出します。

for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // 各 li のカスタム属性を設定します li.setAttribute('a',i)
            ol.appendChild(li)
            // ol の下の各 li にクリックイベントを設定します ol.children[i].onclick=function(){
                // li が排他的思考を実行するようにループします for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // 現在クリックされている要素にクラス属性 this.className='current' を追加します
 
        //New// 現在クリックされている li のカスタム属性の値を取得して、どれがクリックされたかを確認します var index=this.getAttribute('a')
                コンソール.log(インデックス)
                // 各写真の幅をチェックする var imgwidth = ul.children[0].offsetWidth
                // 幅にフレーム数を掛けて移動量を取得します。 offset = index * - imgwidth
                //アニメーション関数を呼び出す animate(ul,offset,50,30)

結果

3. カルーセルに前へボタンと次へボタンを追加する

(CSS スタイルはここでは書きません。最後に示しますので、まずは想像してください。CSS は最初は隠されています)

1.すでにさまざまな要素を取得しているので、今取得する必要はありません。それぞれ入場と退場のイベントを記述するだけです。

// マウスがイベントに入る box.onmousemove=function(){
        nth.style.display='ブロック'
    }   
    // マウスがイベントボックスから離れる。onmouseleave=function(){
        nth.style.display='なし'
    }

2.現在のページを取得し、クリックイベント、次 ++ 前 -- を設定し、前の onclick 効果を適用します。

for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // 各 li のカスタム属性を設定します li.setAttribute('a',i)
            ol.appendChild(li)
            // ol の下の各 li にクリックイベントを設定します ol.children[i].onclick=function(){
                // li が排他的思考を実行するようにループします for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // 現在クリックされている要素にクラス属性 this.className='current' を追加します
                // 現在クリックされている li のカスタム属性の値を取得して、どれがクリックされたかを確認します var index=this.getAttribute('a')
                コンソール.log(インデックス)
                // 各写真の幅をチェックする var imgwidth = ul.children[0].offsetWidth
                // 幅にフレーム数を掛けて移動量を取得します。 offset = index * - imgwidth
                //アニメーション関数を呼び出す animate(ul,offset,50,30)

                 // 新しい // クリックイベント、インデックスは現在クリックされているシーケンスのカスタムクラス名の値です left.onclick=function(){
                if(インデックス>0){
                    索引 - 
                }
                ol.children[インデックス].click()
                }
                right.onclick=関数(){
                
                    if(インデックス<4){
                        インデックス++
                    }
                ol.children[インデックス].click()
                }
 
            }               
}

クリックイベントの値は外部から取得できないので、

ol.children[index].click() のように、イベント内でイベントを呼び出すこともできます。括弧を追加し、on を削除することを忘れないでください。

3. ol.onclickがトリガーされない場合（以下の1、2、3、4、5がクリックされない場合）、左クリックと右クリックは機能しないため、スクリプトにコードを追加する必要があります。

var クリック=0
 
    right.onclick=関数(){
        クリック++
        if(クリック==1){
          ol.children[1].クリック()
        }
    }

この時点で、操作の 3 番目の部分は完了です。

4. カルーセルを自動で動かす

// 自動移動 // 1. まず、最初のボタンに色を追加する必要があります ol.children[0].className='current'
    // 2. タイマーを開始し、5秒ごとに切り替えます setInterval(function(){
        var 位置 = ul.offsetLeft         
        var imgwidth=ul.children[0].offsetWidth         
        var インデックス = Math.abs(位置/画像幅)
        //3. 画像の現在の位置と長さを取得し、それを割ってインデックスを取得します。if (indexs>3) {
            インデックス=-1
        }
        ol.children[インデックス+1].click()
        // ジャンプするときは必ず1を加算してください
        },5000)

1. まず最初に最初のボタンに色を追加し、その後で排他的なアイデアを削除する必要があります。

2. 下付き文字を取得します。ジャンプするには 1 を追加します。それ以外の場合は、その場でジャンプします。2 番目の円は 0 ではなく -1 から始まるため、+1 になります。

望む結果を得ることができます。

全体的なコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル タイプ="text/css">
        * {
            パディング: 0;
            マージン: 0;
            リストスタイル: なし;
            境界線: 0;
        }
 
        。全て {
            幅: 500ピクセル;
            高さ: 200px;
            パディング: 7px;
            境界線: 1px 実線 #ccc;
            マージン: 100px 自動;
            位置: 相対的;
        }
 
        .スクリーン{
            幅: 500ピクセル;
            高さ: 200px;
            オーバーフロー: 非表示;
            位置: 相対的;
        }
 
        .screen li {
            幅: 500ピクセル;
            高さ: 200px;
            オーバーフロー: 非表示;
            フロート: 左;
        }
 
        .screen ul {
            位置: 絶対;
            左: 0;
            上: 0px;
            幅: 3000ピクセル;
        }
 
        .all ol {
            位置: 絶対;
            右: 10px;
            下: 10px;
            行の高さ: 20px;
            テキスト配置: 中央;
        }
 
        .all ol li {
            フロート: 左;
            幅: 20px;
            高さ: 20px;
            背景: #fff;
            境界線: 1px 実線 #ccc;
            左マージン: 10px;
            カーソル: ポインタ;
        }
 
        .all ol li.current {
            背景: 黄色;
        }
 
        #arr {
            表示: なし;
            zインデックス: 1000;
 
        }
 
        #arr スパン {
            幅: 40px;
            高さ: 40px;
            位置: 絶対;
            左: 5px;
            上位: 50%;
            上マージン: -20px;
            背景: #000;
            カーソル: ポインタ;
            行の高さ: 40px;
            テキスト配置: 中央;
            フォントの太さ: 太字;
            フォントファミリ: '太字';
            フォントサイズ: 30px;
            色: #fff;
            不透明度: 0.3;
            境界線: 1px 実線 #fff;
        }
 
        #arr #right {
            右: 5px;
            左: 自動;
        }
    </スタイル>
</head>
<本文>
    <div class="all" id="box">
        <div class="screen">
            <!-- 順序なしリスト -->
            <ul> 
                <li><img src="./wf1.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="./wf2.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="./wf3.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="./wf4.jpg" 幅="500" 高さ="200" /></li>
                <li><img src="./wf5.jpg" 幅="500" 高さ="200" /></li>
            </ul>
            <!-- 順序付きリスト -->
            <オル>
 
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
    <スクリプト>
        // 位置アニメーションのカプセル化を実行する function animate(element,offset,setp,times){
                    // 複数のトリガーを防ぐためにtrueの場合は削除します if(element.jsq){
                        クリア間隔(element.jsq)
                    }
                    // 現在のオフセットを取得する
                    var 位置 = ul.offsetLeft
                    // 移動位置が現在の位置より小さい場合、ステップ長は負になります if (offset < position) {
                        setp=-setp
                    }
                    // ギャップタイマーを開始します if(Math.abs(position-offset)>Math.abs(setp)){
                        要素.jsq = setInterval(() => {
                        位置+=setp
                        element.style.left=位置+'px'
                        // 現在の位置値が事前設定された位置の1ステップ以内の場合、タイマーを停止します。if (Math.abs(position-offset)<Math.abs(setp)){
                            クリア間隔(element.jsq)
                            element.style.left=オフセット+'px'
                        }
                    }, 回);
                    }
                }
    // 1. 要素を取得する var ul = document.querySelector('ul')
    var ol = document.querySelector('ol')
    var nth = document.querySelector('#arr')
    var ボックス = document.querySelector('#box')
    var 左 = document.querySelector('#left')
    var right = document.querySelector('#right')
    // 2. ol にクリック要素を追加する // ol ループに li を追加する
    for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // 各 li のカスタム属性を設定します li.setAttribute('a',i)
            ol.appendChild(li)
            // ol の下の各 li にクリックイベントを設定します ol.children[i].onclick=function(){
                // li が排他的思考を実行するようにループします for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // 現在クリックされている要素にクラス属性 this.className='current' を追加します
                // 現在クリックされている li のカスタム属性の値を取得して、どれがクリックされたかを確認します var index=this.getAttribute('a')
                コンソール.log(インデックス)
                // 各写真の幅をチェックする var imgwidth = ul.children[0].offsetWidth
                // 幅にフレーム数を掛けて移動量を取得します。 offset = index * - imgwidth
                //アニメーション関数を呼び出す animate(ul,offset,50,30)
                // クリックイベント、インデックスは現在クリックされたシーケンス番号のカスタムクラス名の値です left.onclick=function(){
                if(インデックス>0){
                    索引 - 
                }
                ol.children[インデックス].click()
                }
                right.onclick=関数(){
                
                    if(インデックス<4){
                        インデックス++
                    }
                ol.children[インデックス].click()
                }
            }               
    }
 // マウスがイベントに入る box.onmousemove=function(){
        nth.style.display='ブロック'
    }   
    // マウスがイベントボックスから離れる。onmouseleave=function(){
        nth.style.display='なし'
    }
     //マウスの右クリックイベント var Click=0
 
    right.onclick=関数(){
 
        クリック++
 
        if(クリック==1){
 
          ol.children[1].クリック()
 
        }
 
    }
 
    
 
// 自動移動 // 1. まず、最初のボタンに色を追加する必要があります ol.children[0].className='current'
    // 2. タイマーを開始し、5秒ごとに切り替えます setInterval(function(){
        var 位置 = ul.offsetLeft         
        var imgwidth=ul.children[0].offsetWidth         
        var インデックス = Math.abs(位置/画像幅)
        //3. 画像の現在の位置と長さを取得し、それらを割ってインデックスを取得します。if (indexs>3) {
            インデックス=-1
        }
        ol.children[インデックス+1].click()
        // ジャンプするときは必ず1を加算してください
        },5000)
    </スクリプト>
</本文>
</html>

画像へのパスを変更することを忘れないでください。

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

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