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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • シンプルなカルーセル チャートを実装するための JavaScript の最も完全なコード分析 (ES5)
  • シンプルなカルーセル効果を実現するネイティブ js
  • JavaScript を使用してカルーセル効果を実装する
  • JavaScript でカルーセル効果を実装する
  • カルーセルの完全なコードを実装するためのjs
  • ネイティブ js でカルーセルを実装するためのサンプル コード
  • 携帯電話のスライドスイッチカルーセル画像の例をサポートする効果を実現するためのjs
  • JS カルーセル図の実装の簡単なコード
  • js で左右のボタンをクリックして画像を再生する
  • シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)

<<:  MySQL トリガー構文とアプリケーション例

>>:  Centos6 で 20TB を超えるディスクをパーティション分割してフォーマットするためのサンプル コード

推薦する

Node.js で簡単なクローラーケースを作成するチュートリアル

準備まず、nodejs をダウンロードする必要がありますが、これは問題ないはずです。原文はwebst...

Vue+Springbootでインターフェースシグネチャを実装するためのサンプルコード

1. 実装のアイデアインターフェース署名の目的は、リクエストパラメータが改ざんされていないか、リクエ...

BFCとは何ですか? CSS 疑似要素を使用してフロートをクリアする方法

BFCコンセプト:ブロック フォーマット コンテキストは、BFC 内の要素を外部の要素から分離する独...

発生したブラウザの互換性の問題と解決策(推奨)について

序文:先週の日曜日、先輩から3ページ作るのを手伝って欲しいと頼まれました。データのやり取りなどはなく...

MySQL 権限とデータベース設計のケーススタディ

権限とデータベース設計ユーザー管理SQLyogを使用してユーザーを作成し、権限を付与する基本コマンド...

Linuxは、単一のIPをバインドするためにデュアルネットワークカードを実装するためにボンドを使用します。サンプルコード

ネットワークの高可用性を実現するには、複数のネットワーク カードを仮想ネットワーク カードにバインド...

Vue3サンドボックスの仕組みの詳しい説明

目次序文ブラウザコンパイル版ローカルプリコンパイルバージョン要約する参照する序文vue3サンドボック...

Windows/Mac で Docker を使用して MySQL (utf8 を含む) をインストールする

目次1. MacへのDockerのインストール2. Win 10 システムでの Docker のイン...

LinuxカーネルマクロContainer_Ofの詳細な説明

目次1. 構造体はメモリにどのように保存されますか? 2. container_ofマクロ3. 型4...

MySQL スライディングオーダー問題の原理と解決の例分析

この記事では、例を使用して、MySQL スライディング順序問題の原理と解決方法を説明します。ご参考ま...

JavaScript 関数のカリー化

目次1 関数カリー化とは何ですか? 2 カレーの役割と特徴2.1 パラメータの再利用2.2 早期復帰...

Vue3でアイコンを使用する2つの例

目次1. SVGを使用する2. fontAwesomeを使用する3 ソース4 結論テクノロジースタッ...

MySQL 4G メモリ サーバー構成の最適化

会社のウェブサイトのアクセス数が増えてくると(1日10万PV以上)、当然MySQLがボトルネックにな...

WIN10 に複数のデータベースがインストールされている場合にコンピュータの速度低下を防ぐ方法

必要なときにサービスを有効にし、必要がないときは無効にします。データベース サービスを管理する方法:...

js 日付と時刻のフォーマット方法の例

js 日付時刻形式日付と時刻を指定された形式に変換します。例: YYYY-mm-dd HH:MM は...