画像カルーセルを実装するためのネイティブJS 小さな広告プラグインを実装するためのJS

最近、ネイティブ JS を使用して、さらにいくつかの小さな機能を実装したいと思っています。現在、ブログにそれらを書いています。参照してください。質問がある場合は、指摘してください。

カルーセル

必要：

画像はループで回転します。左または右をクリックすると切り替えることができます。切り替え状態は <li> にバインドされています。マウスを画像内に移動するとホバーし、マウスを画像外に移動すると回転が継続します。

<!DOCTYPE html>
 
<html lang="ja">
 
<ヘッド>
 
    <メタ文字セット="UTF-8">
    <title>ネイティブ js カルーセル画像</title>
 
</head>
 
<スタイル>
    。容器{
        幅: 100%;
        高さ: 500px;
        位置: 相対的;
    }

    。コンテンツ{
        幅: 900ピクセル;
        高さ: 450px;
        位置: 相対的;
        オーバーフロー: 非表示; 
        境界線: 1px 実線海緑; 
        マージン: 0 自動;
    }
 
    .スライダー画像{ 
        幅: 900ピクセル; 
        高さ: 450px; 
        マージン: 10px 自動; 
    }
 
    .slider-img 画像{
        垂直方向の位置合わせ: 上;
        幅: 800ピクセル;
        高さ: 400px;
        マージン: 10px 50px;
        表示: ブロック;
 
    }
 
    。左{
        上マージン: -300px;
        左マージン: 50px;
        幅: 100ピクセル;
        高さ: 100px;
    }
 
    .左画像、.右画像{
        幅: 100ピクセル;
        高さ: 100px;
    }
 
    。右{
        上マージン: -100px;
        右マージン: 50px;
        フロート: 右;
        幅: 100ピクセル;
        高さ: 100px;
 
    }
 
 
 
    。ドット{
        位置: 相対的;
        上位: 23%
        左: 43%;
        幅: 50%;
    }
 
    .dotul{
        幅: 450ピクセル;
    }

    .dotul li{ 
        幅: 20px; 
        高さ: 20px;
        背景色: 海緑;
        リストスタイル: なし;
        フロート: 左;
        境界線の半径: 20px; 
        左マージン: 15px; 
        zインデックス: 999; 
        カーソル: ポインタ; 
    }
 
    。アクティブ{
        背景色:オレンジ !重要;
    }
 
 
 
</スタイル>
 
<本文>
 
    <div class="コンテナ" id="コンテナ">
 
        <div class="content" id="content">
            <div class="slider-img" id="slider" >
                  <a href="javascript:;" >
                    <img src="./img/88.jpg" alt="" id="img">
                </a>
            </div>
 
        </div>
        <div class="btn">
            <div class="left" id="left">
                <a href=" ###" ><img src=""></a>
            </div>
 
            <div class="right" id="right">
                <a href=" ###" ><img src=""></a>
            </div>
        </div>
 
        <div class="dot">
            <ul id="ul" class="dotul">
                <li class="active"></li>
                <li></li>
                <li></li>
               <li></li>
            </ul>
        </div>
</div>

js コードを使用する場合は、html に JS を導入することを忘れないでください。

var コンテナ = document.getElementById("コンテナ"); 
var コンテンツ = document.getElementById("コンテンツ");
var スライダー = document.getElementById("スライダー");
var img = document.getElementById("img");
var ul = document.getElementById("ul"); 
タグ名によって要素を取得します。 
var left = document.getElementById("left"); 
var right = document.getElementById("right"); 
var 数値 = 0;
var タイマー = null;    
var picList = ["./img/88.jpg","./img/are.jpg","./img/family.jpg","./img/one.jpg"];
//liをリストの添え字に対応させる //画像の表示方法を設定する。表示時はliのドットが画像にバインドされる ShowPicture = function() {
       img.src = picList[番号];
       for(var i = 0; i < li.length; i++) {
           li[i].className = '';
       }
       li[num].className = 'アクティブ';
    }
  
    //左クリック、すでに最初の画像の場合は、最後の画像に戻ります。onclick = function() {
        数値--;
        if(数値 < 0) {
           num = picList.length-1;
        }
        画像を表示します。
    }
  

    // 右クリックし、最後の画像の場合は最初の画像に戻る right.onclick = function() {
        数値++;
        if(num >= picList.length) { //3
            数値 = 0;
        }
        画像を表示します。
    }
    
     //ドットをクリックすると対応する画像にジャンプし、liとリストの添え字を一致させます list.index=li.index
   
     for(var i = 0; i < picList.length; i++) {
         li[i].インデックス = i;
         li[i].onclick = 関数() {
             num = this.index;
             画像を表示します。
         }
     }

    //写真を自動的に回転します。呼び出すたびにタイマーをクリアし、呼び出し後にタイマーを返して、時間差がどんどん大きくならないようにすることを忘れないでください。autoChange = function() {
        タイマーの間隔をクリアします。
        タイマー = setInterval(() => {
            数値++;
            num % = picList.length;
            画像を表示します。
        }, 3000);
        タイマーを返します。
    }
    ウィンドウのonloadを自動変更します。

   
    //イベント img.onmouseover = function() {
        タイマーの間隔をクリアします。
    }
    img.onmouseleave = autoChange;

広告プラグイン

要件:ページが読み込まれると、広告がポップアップ表示され、カルーセルに表示されます。マウスを移動してホバーし、マウスを移動しても広告は引き続き表示されます。削除するには [X] をクリックします。

<div id="勝つ">
        <画像id = "画像" />
        <button id = "ad_btn">X</button>  
        // 練習中ですが、クロスはXに置き換えられています。自分のプロジェクトに参加するときにアイコンに置き換えることができます。
</div>

//ページが読み込まれた後、ポップアップ広告が表示されます。削除するには「X」をクリックします。
var ad = document.getElementById('win');
var img = document.getElementById('img');
var ad_btn = document.getElementById('ad_btn');
var タイマー;
window.onload = 関数（）{
    // clearInterval(タイマー);
    タイマー = setTimeout(() => {
            ad.style.display = 'ブロック';  
        }, 2000);
        変化（）;
}

var count=0;
var 数値 = 0;
var imgTimer = null;
//画像ソースリスト
var picList = ['../img/88.jpg','../img/one.jpg','../img/family.jpg','../img/are.jpg'];
関数変更() {
    クリアインターバル(画像タイマー)
    imgTimer = setInterval(() => {
       if(count === picList.length) {
           カウント = 0;
           リセット表示();
       } それ以外 {
           表示を開始します。
       }
       カウント++;          
   }, 3000);
}
関数resetShow() {
    画像のリストをコピーします。
    数値 = 0;
    表示を開始します。
}

関数startShow() {
    if(num < picList.length) {
        img.src = picList[num++];
    } それ以外 {
        リセット表示();
    }
   
}


ad_btn.addEventListener('クリック', (e)=>{
    ad.style.display = 'なし';
    タイムアウトをクリア(タイマー)
});

ad.addEventListener('マウスオーバー', ()=>{
    間隔をクリアします(imgTimer);
})
ad.onmouseleave = 関数() {
    変化（）;
}

実装表示: