關于JavaScript輪播圖的實現(xiàn)

更新時間：2021年11月19日 14:26:50 作者：靠技術(shù)吃飯

這篇文章主要介紹了關于JavaScript輪播圖的實現(xiàn),下面文章主要是利用利用html 和 css 代碼實現(xiàn)輪播圖，詳細內(nèi)容請參考下面詳細內(nèi)容，希望對你有所幫助

今天又是一個非常實用的案例喲，聽名字就覺得高級很難對吧，今天就來寫一個案例，讓你輕松學到輪播圖的精髓！！

還是老規(guī)矩，來看一下實現(xiàn)效果??！

學習輪播圖的首先是要把圖片準備好，并且用 ul 的里面的 li 包起來，給 li 一個浮動，讓他們顯示在一行上，但是注意了，一定要給 ul 足夠的寬哦！！

來吧，html 和 css 代碼如下所示（文件名：index.html）

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="animate.js"></script>
    <script src="輪播圖.js"></script>
    <style>
        body {
            background-color: rgb(151, 147, 147);
        }
 
        * {
            margin: 0;
            padding: 0;
        }
 
        div {
            overflow: hidden;
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 20px auto;
        }
 
        ul {
            list-style: none;
        }
 
        .img {
            width: 600%;
            position: absolute;
            left: 0;
        }
 
        li {
            float: left;
        }
 
        img {
            width: 500px;
            height: 500px;
        }
 
        .yuan>li {
            cursor: pointer;
            width: 10px;
            height: 10px;
            background-color: rgb(190, 185, 185);
            border-radius: 50%;
            margin: 0 5px;
            border: 1px solid rgb(119, 114, 114);
        }
 
        .yuan {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
 
        .yuan .color {
            background-color: rgb(228, 135, 135);
        }
 
        a {
            text-decoration: none;
            color: black;
            background-color: rgb(112, 111, 111);
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: none;
        }
 
        .left {
            left: 0;
        }
 
        .right {
            right: 0;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <ul class="img">
            <li><img src="images/1.webp" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.webp" alt=""></li>
            <li><img src="images/4.webp" alt=""></li>
            <li><img src="images/5.webp" alt=""></li>
        </ul>
        <a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="left">&lt;</a>
        <a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="right">></a>
        <ul class="yuan"></ul>
    </div>
</body>
 
</html>

這樣寫好以后，一個基本的樣子就算是有了。

接下來就是讓他動起來，想想什么可以讓圖片動起來，是不是我們學過的動畫效果呀，所有這個地方要用緩動動畫來實現(xiàn)一個切換圖片的效果，因為 js 代碼較多，所以得新建一個 js 文件，把代碼封裝起來！

下面就是封裝得 js 代碼（文件名：輪播圖.js）

window.addEventListener('load', function () {
    var img = document.querySelector('.img');
    var yuan = document.querySelector('.yuan');
    var box = document.querySelector('.box');
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var imgwidth = box.offsetWidth;  //獲取盒子的寬度（圖片的寬度）
    // 經(jīng)過鼠標觸發(fā) 停止自動滾動圖片效果
    box.addEventListener('mouseenter', function () {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
    })
    // 離開鼠標觸發(fā) 自動滾動圖片再次觸發(fā)
    box.addEventListener('mouseleave', function () {
        left.style.display = 'none';
        right.style.display = 'none';
        timer = setInterval(function () {
            right.click();
        }, 2000)
    })
    // 根據(jù)圖片添加下面的小圓點
    for (var i = 0; i < img.children.length; i++) {
        var li = document.createElement('li');
        yuan.appendChild(li);
        li.setAttribute('date-index', i);
        li.addEventListener('click', function () {
            for (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            this.className = 'color';
            var index = this.getAttribute('date-index');
            var imgwidth = box.offsetWidth;
            // animate(obj,target,function(){})
            animate(img, -index * imgwidth);
            nums = index;
            colors = index;
        })
    }
    // 默認第一個小圓點有顏色
    yuan.children[0].className = 'color';
    var nums = 0;
    var colors = 0;
    // 復制第一張圖片到最后,給無縫滾動做準備
    var li = img.children[0].cloneNode(true);
    img.appendChild(li);
    var flag = true;
    //右邊按鈕,切換下一張,小圓點一起變化
    right.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (nums == img.children.length - 1) {
                nums = 0;
                img.style.left = 0;
            }
            nums++;
            animate(img, -nums * imgwidth, function () {
                flag = true;
            });
            colors++;
            if (colors == yuan.children.length) {
                colors = 0;
            }
            for (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            yuan.children[colors].className = 'color';
        }
    })
    // 左邊按鈕,切換下一張,小圓點一起變化
    left.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (nums == 0) {
                nums = img.children.length - 1;
                img.style.left = -nums * imgwidth + 'px';
            }
            nums--;
            colors--;
            animate(img, -nums * imgwidth, function () {
                flag = true;
            });
            if (colors < 0) {
                colors = yuan.children.length - 1;
            }
            // if (colors == 0) {
            //     colors = yuan.children.length;
            // }
            // colors--;
            for (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            yuan.children[colors].className = 'color';
        }
    })
    // 鼠標不經(jīng)過圖片實現(xiàn)自動滾動
    var timer = setInterval(function () {
        right.click();
    }, 2000)
})

關鍵的來了，要讓動起來怎么少得了動畫效果呢，我單獨封裝了一個 js 文件，這樣以后寫其他案例的時候也可以直接引用了。

代碼如下（文件名：animate.js）

function animate(obj, target, callback) {  //移動的對象(誰移動)，移動的目的位置，回調(diào)函數(shù)
    // 先清除以前的定時器，只保留當前的一個定時器執(zhí)行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 步長寫到定時器里面
        var step = (target - obj.offsetLeft) / 10; //步長公式：(目標位置-現(xiàn)在的位置)/10
        step = step > 0 ? Math.ceil(step) : Math.floor(step); //步長改為整數(shù)，不要出現(xiàn)小數(shù)，正數(shù)向上取整，負數(shù)向下取整
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer)  //停止動畫，本質(zhì)是停止定時器
            if (callback) {
                callback(); // 回調(diào)函數(shù)寫到定時器結(jié)束里面
            }
        }
        //步長作為一個慢慢變小的值才能實現(xiàn)從快到慢的緩動停止的效果
        obj.style.left = obj.offsetLeft + step + 'px';
    },15)
}

基本上都用注釋寫清楚了，應該能每一步都看得懂了。

到此這篇關于關于JavaScript輪播圖的實現(xiàn)的文章就介紹到這了,更多相關輪播圖的實現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

微信小程序數(shù)據(jù)遍歷的實現(xiàn)
這篇文章主要介紹了微信小程序數(shù)據(jù)遍歷的實現(xiàn)的相關資料,需要的朋友可以參考下
2017-04-04
微信小程序頁面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解
這篇文章主要介紹了微信小程序頁面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解的相關資料,需要的朋友可以參考下
2017-03-03
Promise改寫獲取螢石云直播地址接口示例
這篇文章主要為大家介紹了Promise改寫獲取螢石云直播地址接口示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
使用async?await處理錯誤方法示例
這篇文章主要為大家介紹了使用async?await處理錯誤的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
JS前端宏任務微任務及Event Loop使用詳解
這篇文章主要為大家介紹了JS前端宏任務微任務及Event Loop使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
CryptoJs常規(guī)密碼加密demo
這篇文章主要為大家介紹了CryptoJs常規(guī)密碼加密的實現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
Google 地圖API資料整理及詳細介紹
本文主要介紹Google 地圖API資料,這里整理了Google地圖API的基本知識，并詳解每個函數(shù)的意思，有需要的小伙伴可以參考下
2016-08-08
微信小程序限制1M的瘦身技巧與方法詳解
這篇文章主要介紹了微信小程序瘦身技巧與方法詳解的相關資料,現(xiàn)在微信小程序提交代碼只有1M大小的限制，這就對開發(fā)者提出難題了，這里提供了相關方法技巧，需要的朋友可以參考下
2017-01-01
詳解Jest?如何支持異步及時間函數(shù)實現(xiàn)示例
這篇文章主要為大家介紹了Jest?如何支持異步及時間函數(shù)實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
前端JavaScript多數(shù)元素的算法詳解
這篇文章主要介紹了前端JavaScript多數(shù)元素的算法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07