原生JS實現圖片輪播 JS實現小廣告插件

Posted on by

最近想用原生JS多實現一些小功能，現在寫到博客裡，大傢可以借鑒，有問題歡迎指出。

輪播圖

需求：

圖片循環輪播，可點擊左右切換，切換狀態與<li>綁定，鼠標移入圖片懸停，鼠標移出圖片繼續循環切換。

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
    <title>原生js輪播圖片</title>
 
</head>
 
<style>
    .container{
        width: 100%;
        height: 500px;
        position: relative;
    }

    .content{
        width: 900px;
        height: 450px;
        position: relative;
        overflow: hidden; 
        border: 1px solid seagreen; 
        margin: 0 auto;
    }
 
    .slider-img{ 
        width: 900px; 
        height: 450px; 
        margin: 10px auto; 
    }
 
    .slider-img img{
        vertical-align: top;
        width: 800px;
        height: 400px;
        margin: 10px 50px;
        display: block;
 
    }
 
    .left{
        margin-top: -300px;
        margin-left: 50px;
        width: 100px;
        height: 100px;
    }
 
    .left img,.right img{
        width: 100px;
        height: 100px;
    }
 
    .right{
        margin-top: -100px;
        margin-right: 50px;
        float: right;
        width: 100px;
        height: 100px;
 
    }
 
 
 
    .dot{
        position: relative;
        top: 23%;
        left: 43%;
        width: 50%;
    }
 
    .dotul{
        width: 450px;
    }

    .dotul li{ 
        width: 20px; 
        height: 20px;
        background-color: seagreen;
        list-style: none;
        float: left;
        border-radius: 20px; 
        margin-left: 15px; 
        z-index: 999; 
        cursor: pointer; 
    }
 
    .active{
        background-color: orangered !important;
    }
 
 
 
</style>
 
<body>
 
    <div class="container" id="container">
 
        <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="%20###" ><img src=""></a>
            </div>
 
            <div class="right" id="right">
                <a href="%20###" ><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 container = document.getElementById("container"); 
var content = document.getElementById("content");
var slider = document.getElementById("slider");
var img = document.getElementById("img");
var ul = document.getElementById("ul"); 
var li = document.getElementsByTagName("li"); 
var left = document.getElementById("left"); 
var right = document.getElementById("right"); 
var num = 0;
var timer = null;    
var picList = ["./img/88.jpg","./img/are.jpg","./img/family.jpg","./img/one.jpg"];
//將li與list下標對應
 

    //設置展示圖片的方法，展示時，li的圓點與圖片綁定在一起
    ShowPicture = function() {
       img.src = picList[num];
       for(var i = 0 ; i < li.length;i++) {
           li[i].className = '';
       }
       li[num].className = 'active';
    }
  
    //左點擊，如果已經是第一張瞭就返回最後一張

    left.onclick = function() {
        num--;
        if(num < 0) {
           num = picList.length-1;
        }
        ShowPicture();
    }
  

    //右點擊，若已經是最後一張返回第一張
    right.onclick = function() {
        num++;
        if(num >= picList.length) {   //3
            num = 0;
        }
        ShowPicture();
    }
    
     //實現點擊圓點跳轉對應圖片，將li與list下標對應list.index=li.index
   
     for(var i = 0; i < picList.length ; i++) {
         li[i].index = i;
         li[i].onclick = function() {
             num = this.index;
             ShowPicture();
         }
     }

    //自動輪播圖片，每次調用要記得清除定時器，並在調用後回歸定時器，防止時間差越變越大

    autoChange = function() {
        clearInterval(timer);
        timer = setInterval(() => {
            num++;
            num %= picList.length;
            ShowPicture();
        }, 3000);
        return timer;
    }
    window.onload = autoChange;

   
    //事件
    img.onmouseover = function() {
        clearInterval(timer);
    }
    img.onmouseleave = autoChange;

廣告插件

需求：頁面加載結束後彈出廣告，廣告輪播展示，鼠標移入懸停，移出繼續展示，點X可刪除。

<div id="win">
        <img id = "img" />
        <button id = "ad_btn">X</button>  
        //我這是練習，叉號用的X替代，自己做項目加入時可以換成Icon
</div>
//頁面加載結束彈出廣告，廣告切換展示，點擊X可刪除,
var ad = document.getElementById('win');
var img = document.getElementById('img');
var ad_btn  = document.getElementById('ad_btn');
var timer;
window.onload = function () {
    // clearInterval(timer);
    timer = setTimeout(() => {
            ad.style.display = 'block';  
        }, 2000);
        change();
}

var count=0;
var num = 0;
var imgTimer = null;
//picture srcList
var picList = ['../img/88.jpg','../img/one.jpg','../img/family.jpg','../img/are.jpg'];
function change() {
    clearInterval(imgTimer)
    imgTimer = setInterval(() => {
       if(count === picList.length) {
           count = 0;
           resetShow();
       } else {
           startShow();
       }
       count++;          
   }, 3000);
}
function resetShow() {
    img.src = picList[0];
    num = 0;
    startShow();
}

function startShow() {
    if(num < picList.length) {
        img.src = picList[num++];
    } else {
        resetShow();
    }
   
}


ad_btn.addEventListener('click' , (e)=>{
    ad.style.display = 'none';
    clearTimeout(timer)
});

ad.addEventListener('mouseover' , ()=>{
    clearInterval(imgTimer);
})
ad.onmouseleave = function() {
    change();
}

實現展示：

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：