JS でカルーセル効果を実現する 3 つの簡単な方法

この記事では、JSカルーセル効果の具体的なコードを実現するための3つの方法を紹介します。具体的な内容は次のとおりです。

Js はカルーセル画像を実装します 01

実装のアイデア

これは、カルーセルの最もシンプルな実装の 1 つかもしれません。この効果は、画像の src を変更することで実現されます。まず、pic01.jpg、pic02.jpg... などの画像の命名形式を統一し、次に js を使用してタイマーを使用して img タグ内の src 画像リンクの名前を変更し、切り替え効果を実現します。コードは次のとおりです。

成果を達成する

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>カルーセル実装 01</title>
  <スタイル タイプ="text/css">
   .lunbo{
    幅: 900ピクセル;
    高さ: 400px;
    マージン:100px 自動;
   }
   .lunbo画像{
    幅: 100%;
    高さ:100%;
   }
  </スタイル>
 </head>
 <本文>
  <!--スライドショー モジュール-->
  <div class="lunbo">
   <img id="lunbo_img" src="./pic/img3.jpeg" >
  </div>
  <!-- JS コード -->
    <スクリプト>
      var インデックス = 1;
        関数 lunbo(){
            インデックス++;
            // インデックスが3より大きいかどうかをチェックする
            if(インデックス > 3){
                インデックス = 1;
            }
            //img オブジェクトを取得します var img = document.getElementById("lunbo_img");
            img.src = "./pic/img"+index+".jpeg";
        }
        //2. タイマーを定義します setInterval(lunbo,2000);
        /* タイマーで lunbo メソッドを呼び出すときに add()、setInterval(lunbo,2000) は実行できないことに注意してください。add() を実行すると lunbo() メソッドが実行され、タイマーが無効になります。
 </スクリプト>
 </本文>
</html>

Jsがカルーセル画像を実現02

実装のアイデア

これは、カルーセルの最もシンプルな実装の 1 つかもしれません。この効果は、背景画像のリンクを変更することで実現されます。まず、pic01.jpg、pic02.jpg... などの画像の命名形式を統一し、次に js を使用してタイマーを使用して、背景属性の url() 画像リンクの名前を変更し、切り替え効果を実現します。コードは次のとおりです。

成果を達成する

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>カルーセル実装 02</title>
  <スタイル>
   体{
    マージン: 0;
    パディング: 0;
   }
   .lunbo{
    幅:100%;
    高さ:720px;
    背景画像: url(pic/img1.jpeg);/*背景画像*/
    背景サイズ:100% 100%; 
   }
  </スタイル>
 </head>
 <本文>
  <div class="lunbo">
   
  </div>
  <script type="text/javascript">
    var インデックス = 1;
   関数 lunbo(){
    インデックス++;
    // 数値が 3 より大きいかどうかをチェックします
    if(インデックス > 3){
     インデックス = 1;
    }
    //imgオブジェクトを取得します。var img = document.getElementsByClassName("lunbo")[0];
  img.style.background = "url(pic/img"+index+".jpeg)";
  背景サイズ = "100% 100%"; 
   }
   //2. タイマーを定義します setInterval(lunbo,3000);
  </スクリプト>
 </本文>
</html>

Js はカルーセル画像を実装します 03

このカルーセルを実装するには、まずCSSコードを使用して、画像を格納するすべてのliタグのopacity属性を0に設定して非表示にします。jsコードを使用して、タイマーを使用してクラスactiveを継続的に呼び出し、liタグを強調表示し、兄弟liタグを非表示にします。次に、index ++を使用して、循環表示を切り替える効果を実現します。両側のボタンをクリックすると、index ++が配置されているメソッドが呼び出され、切り替え効果を実現します。複雑なアルゴリズムはありません。少しの基礎知識があれば、コードを見ればわかります。参考にしてください。

成果を達成する

HTMLコード

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <meta name="viewport" content="width=デバイス幅,初期スケール=1,
  最小スケール=1、最大スケール=1、ユーザースケーラブル=いいえ" />
  <!--CSS コードを導入する-->
  <link rel="スタイルシート" type="text/css" href="./css/index.css" />
  <!--Js コードを導入-->
  <script src="./js/index.js"></script>
  <title>Js はカルーセル画像を実装します</title>
 </head>
 <本文>
  <div class="lunbo">
   <div class="content">
   <ul id="item">
    <li class="item">
     <a href="#" ><img src="img/pic1.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic2.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic3.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic4.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic5.jpg" ></a>
    </li>
   </ul>
   <div id="btn-left"><</div>
   <div id="btn-right">></div>
   <ul id="circle">
    
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
   </ul>
   </div>
  </div>
 </本文>
</html>

CSSコード

*{
 マージン: 0;
 パディング: 0;
}
{
 リストスタイル: なし;
}
li{
 リストスタイル: なし;
}
.lunbo{
 幅: 100%;
}
。コンテンツ{
 幅: 800ピクセル;
 高さ: 300px;
 マージン: 20px 自動;
 位置: 相対的;
}
＃アイテム{
 幅: 100%;
 高さ: 100%;
 
}
。アイテム{
 位置: 絶対;
 不透明度: 0;
 遷移: すべて 1;
 
}
.item.active{
 不透明度:1;
}
画像{
 幅: 100%;
}
#btn-左{
 幅: 30ピクセル;
 高さ: 69px;
 フォントサイズ: 30px;
 色: 白;
 背景色:rgba(0,0,0,0.4);
 行の高さ: 69px;
 パディング左:5px;
 z-index: 10;/*常に画像の上部に表示されます*/
 位置: 絶対;
 左: 0;
 上位: 50%;
 transform: translateY(-60%);/*ボタンを上方向にオフセットして中央に配置する*/
 カーソル: ポインタ;
 不透明度: 0;/*通常は非表示*/
}
.lunbo:hover #btn-left{
 /*マウスオーバーするとアイコンが表示されます*/
 不透明度: 1;
}

#右ボタン{
 幅: 26px;
 高さ: 69px;
 フォントサイズ: 30px;
 色: 白;
 背景色:rgba(0,0,0,0.4);
 行の高さ: 69px;
 左パディング: 5px;
 zインデックス: 10;
 位置: 絶対;
 右: 0;
 上位: 50%;
 カーソル: ポインタ;
 不透明度: 0;
 変換: translateY(-60%);
}
.lunbo:hover #btn-right{
 不透明度: 1;
}
＃丸{
 高さ: 20px;
 ディスプレイ: フレックス;
 位置: 絶対;
 下: 35px;
 右: 25px;
}
。丸{
 幅: 10px;
 高さ: 10px;
 境界線の半径: 10px;
 境界線: 2px の白実線;
 背景: rgba(0,0,0,0.4);
 カーソル: ポインタ;
 マージン: 5px;
}
。白{
 背景色: #FFFFFF;
}

JSコード

window.onload = 関数(){
var items = document.getElementsByClassName("item");
var 円 = document.getElementsByClassName("円");
var leftBtn = document.getElementById("btn-left");
var rightBtn = document.getElementById("btn-right");
var コンテンツ = document.querySelector('.content');
var インデックス = 0;
var タイマー = null;

//クラスをクリア
var clearclass = 関数(){
 for(let i=0;i<items.length;i++){
  items[i].className="item";
  円[i].className="円";
  円[i].setAttribute("num",i);
 }
}
/* 1 つのクラスのみ表示 */
関数move(){
 クリアクラス();
 items[index].className="アイテムがアクティブ";
 circles[index].className="circle white";
}
// 右側のボタンをクリックすると次の画像に切り替わります rightBtn.onclick=function(){
 if(インデックス<items.length-1){
  インデックス++;
 }
 それ以外{
  インデックス=0;
 }
 動く（）;
}
// 前の画像に切り替えるには、左側のボタンをクリックします leftBtn.onclick=function(){
 if(index<items.length){
  索引 - ;
 }
 それ以外{
  インデックス=items.length-1;
 }
 動く（）;
}
//タイマーを開始し、右側のボタンをクリックしてカルーセルを実現します timer=setInterval(function(){
 右ボタンをクリックする();
},1500)
//ドットをクリックすると、対応する画像にジャンプします for(var i=0;i<circles.length;i++){
 円[i].addEventListener("クリック",function(){
  var point_index = this.getAttribute("num");
  インデックス=ポイントインデックス;
  動く（）;
 })

}
//マウスを動かすとタイマーがクリアされ、3秒のタイマーが開始されてコンテンツがゆっくり回転します。onmouseover=function(){
 タイマーの間隔をクリアします。
  タイマー = setInterval(関数(){
   右ボタンをクリックする();
  },3000)
}
//マウスを離してタイマーを開始します content.onmouseleave=function(){
 タイマーの間隔をクリアします。
 タイマー = setInterval(関数(){
  右ボタンをクリックする();
 },1500)
}
}

コードはうまく書かれていない可能性があり、多くの欠点があります。指摘や批判を歓迎します。私はそれを修正するために最善を尽くします。質問がある場合は、メッセージを残してください。私はそれらに最善を尽くして答えます。この記事を読んでいただきありがとうございます。

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

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