本文例項為大家分享了實現簡單輪播圖效果的具體程式碼，供大家參考，具體內容如下

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

<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;
            EpETOtk
 
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,0.3);
            cursor: pointer;
        }
        
        .left,.right {
            display: none;
            box-sizing: border-box;
            position: absolute;
      http://www.cppcns.com
 
      top: 150px;
            width: 50px;
            height: 100px;
            background-color: rgba(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="js實現簡單輪播圖效果">
            <img src="./img/2.jpeg" alt="js實現簡單輪播圖效果">
            <img src="./img/3.jpeg" alt="js實現簡單輪播圖效果">
            <img src="./img/4.jpeg" alt="js實現簡單輪播圖效果">
            <img src="./img/5.jpeg" alt="js實現簡單輪播圖效果">
        </div>

        <div class="btn">
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
           http://www.cppcns.com <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,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,0.4)';
                }
                // 點選的按鈕變色
                k = +e.target.dataset.num;
                console.log(k);
                btnChild[k / 600].style.background = 'rgba(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;



        // 函式 移動圖片，改變按鈕
        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,0.4)';
            }

            btnChild[k / 6EpETOtk00].style.background = 'rgba(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,0.4)';
            }

            btnChild[k / 600].style.background = 'rgba(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,0.8)';


        }
</script>

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。