js實現(xiàn)簡單輪播圖效果

更新時間：2021年09月14日 11:18:47 作者：山與小島

這篇文章主要為大家詳細介紹了js實現(xiàn)簡單輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)簡單輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下

使用transform = translateX()實現(xiàn)的圖片切換

<style>
        .box {
            position: relative;
            overflow: hidden;
            margin: 200px auto;
            width: 600px;
            height: 400px;
        }
        
        .img {
            width: 3000px;
            height: 400px;
        }
        
        img {
            float: left;
            width: 600px;
            height: 400px;
        }
        
        .btn {
            position: absolute;
            top: 350px;
            left: 245px;
            width: 110px;
            height: 20px;
        }
        
        .dian {
            float: left;
            margin: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.3);
            cursor: pointer;
        }
        
        .left,
        .right {
            display: none;
            box-sizing: border-box;
            position: absolute;
            top: 150px;
            width: 50px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0.521);
            font-size: 40px;
            line-height: 100px;
            color: #fff;
        }
        
        .box:hover .left,
        .box:hover .right {
            display: block;
        }
        
        .left {
            padding-left: 10px;
            left: 0;
        }
        
        .right {
            padding-right: 10px;
            text-align: right;
            right: 0;
        }
</style>

<div class="box">
        <div class="img">
            <img src="./img/1.jpeg" alt="">
            <img src="./img/2.jpeg" alt="">
            <img src="./img/3.jpeg" alt="">
            <img src="./img/4.jpeg" alt="">
            <img src="./img/5.jpeg" alt="">
        </div>

        <div class="btn">
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
        </div>

        <div class="left">&lt; </div>
        <div class="right">&gt;</div>
</div>

<script>
        var btn = document.getElementsByClassName('btn')[0];
        var imgBox = document.getElementsByClassName('img')[0];
        var imgs = imgBox.getElementsByTagName('img');
        var btnChild = document.getElementsByClassName('dian');

        var k = 0;
        // 向按鈕添加自定義屬性
        for (var i = 0; i < btnChild.length; i++) {
            btnChild[i].dataset.num = i * 600;
        }
        // 默認為 第一張圖片，第一個按鈕為白色
        btnChild[0].style.background = 'rgba(255, 255, 255, 0.8)';

        // 點擊按鈕切換圖片，按鈕變色
        btn.onclick = function(e) {

            if (e.target.nodeName === 'SPAN') {
                // 先讓所有按鈕為默認顏色
                for (var i = 0; i < btnChild.length; i++) {
                    btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
                }
                // 點擊的按鈕變色
                k = +e.target.dataset.num;
                console.log(k);
                btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';
                // 切換圖片
                imgBox.style.transform = `translateX(-${e.target.dataset.num}px)`;
            }
        }

        // 獲取圖片長度
        // var imgWidth = +getComputedStyle(imgs[0]).width.slice(0, -2);
        var imgWidth = imgs[0].offsetWidth;


        // 定時器 移動圖片
        var interval1 = setInterval(move, 1000);
        var interval;



        // 函數(shù) 移動圖片，改變按鈕
        function move() {
            k += imgWidth;
            if (k === imgWidth * imgs.length) {
                k = 0;
            }
            // 移動圖片 
            imgBox.style.transform = `translateX(-${k}px)`;
            // 改變按鈕顏色
            for (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';


        }


        // 鼠標移動到圖片上 刪除定時器
        var box = document.getElementsByClassName('box')[0];
        box.onmouseover = function() {
            clearInterval(interval1);
            clearInterval(interval);
        }

        // 鼠標移出 啟動定時器
        box.onmouseout = function() {
            interval = setInterval(move, 1000);
        }

        var leftBtn = document.getElementsByClassName('left')[0];
        var rightBtn = document.getElementsByClassName('right')[0];

        rightBtn.onclick = function() {

            k += imgWidth;
            if (k === imgWidth * imgs.length) {
                k = 0;
            }
            // 移動圖片 
            imgBox.style.transform = `translateX(-${k}px)`;
            // 改變按鈕顏色
            for (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';


        }
        leftBtn.onclick = function() {
            k -= imgWidth;
            if (k < 0) {
                k = imgWidth * (imgs.length - 1);
            }
            imgBox.style.transform = `translateX(-${k}px)`;
            // 改變按鈕顏色
            for (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';


        }
</script>

效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
輪播圖

鼠標懸停小圖標顯示大圖標
這篇文章主要介紹了鼠標懸停小圖標顯示大圖標的相關資料,需要的朋友可以參考下
2016-01-01
js實現(xiàn)拖動模態(tài)框
這篇文章主要為大家詳細介紹了js實現(xiàn)拖動模態(tài)框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
詳解RequireJS按需加載樣式文件
本篇文章主要介紹了RequireJS按需加載樣式文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
javascript 打印內(nèi)容方法小結
關于JS打印問題！網(wǎng)上收集+自己總結，需要的朋友可以參考下。
2009-11-11
JS函數(shù)節(jié)流和防抖之間的區(qū)分和實現(xiàn)詳解
本文主要介紹的是關于JS中比較常用的函數(shù)：節(jié)流函數(shù)和防抖函數(shù)，從概念、使用場景到代碼簡單實現(xiàn)做了一個詳細的區(qū)分。感興趣的小伙伴們可以參考一下
2019-01-01
artdialog的圖片/標題以及關閉按鈕不顯示的解決方法
正如標題所言不顯示的原因是因其它css樣式文件中包含div{ overflow:hidden; }引起的artdialog的圖片以及關閉按鈕不顯示，具體的解決方法如下，感興趣的朋友可以參考下哈
2013-06-06
js操作textarea方法集合封裝(兼容IE,firefox)
在DOM里面操作textarea里面的字符，是比較麻煩的。于是我有這個封裝分享給大家，測試過IE6,8, firefox ,chrome, opera , safari。兼容沒問題。
2011-02-02
javascript實現(xiàn)俄羅斯方塊游戲的思路和方法
至于俄羅斯方塊的話，有很多的難點，如果有JS去寫的話，要考慮到碰撞啊，邊界啊，下落等問題，本文這些問題大部分都有考慮到，這里給大家提供一部分思路，拋磚引玉，有需要的小伙伴可以參考下。
2015-04-04
js中遞歸函數(shù)的使用介紹
所謂的遞歸函數(shù)就是在函數(shù)體內(nèi)調(diào)用本函數(shù)。使用遞歸函數(shù)一定要注意，處理不當就會進入死循環(huán)。遞歸函數(shù)只有在特定的情況下使用，比如階乘問題
2012-10-10
用js限制網(wǎng)頁只在微信瀏覽器中打開(或者只能手機端訪問)
這篇文章主要介紹了用js限制網(wǎng)頁只在微信瀏覽器中打開,很多電影站也是這么限制的，原因你懂的，需要的朋友可以參考下
2020-01-01