纯 JavaScript 实现图片轮播效果 - 详细教程

<div class='lbt'>
				<div class='lbt-div'>
					<div class='scroll'>
						<!-- 图片展示 -->
						<img src='upload/focus2.jpg.jpg' alt='scrollImage' class='img current'>
						<img src='upload/focus3.jpg' alt='scrollImage' class='img'>
						<img src='upload/focus1.jpg.jpg' alt='scrollImage' class='img'>
<pre><code>					&lt;!-- 左右切换 --&gt;
					&lt;div class='btns letf'&gt;&lt;&lt;/div&gt;
            			&lt;div class='btns right'&gt;&gt;&lt;/div&gt;
					&lt;!-- 小圆点展示 --&gt;
					&lt;div class='dots'&gt;
						&lt;span class='square'&gt;&lt;/span&gt;
						&lt;span&gt;&lt;/span&gt;
						&lt;span&gt;&lt;/span&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
</code></pre>
<script>
    // 获取元素
    var scroll = document.querySelector('.scroll');
    var imgs = document.querySelectorAll('.img');
    var btns = document.querySelectorAll('.btns');
    var dots = document.querySelectorAll('.dots span');
    var currentIndex = 0;
    
    // 自动播放
    var timer = setInterval(function() {
        currentIndex++;
        if (currentIndex >= imgs.length) {
            currentIndex = 0;
        }
        changeImg();
    }, 2000);
    
    // 切换图片
    function changeImg() {
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].classList.remove('current');
            dots[i].classList.remove('square');
        }
        imgs[currentIndex].classList.add('current');
        dots[currentIndex].classList.add('square');
    }
    
    // 鼠标悬停暂停播放
    scroll.addEventListener('mouseenter', function() {
        clearInterval(timer);
    });
    scroll.addEventListener('mouseleave', function() {
        timer = setInterval(function() {
            currentIndex++;
            if (currentIndex >= imgs.length) {
                currentIndex = 0;
            }
            changeImg();
        }, 2000);
    });
    
    // 点击切换
    btns[0].addEventListener('click', function() {
        currentIndex--;
        if (currentIndex < 0) {
            currentIndex = imgs.length - 1;
        }
        changeImg();
    });
    btns[1].addEventListener('click', function() {
        currentIndex++;
        if (currentIndex >= imgs.length) {
            currentIndex = 0;
        }
        changeImg();
    });
    
    // 点击小圆点切换
    for (var i = 0; i < dots.length; i++) {
        dots[i].addEventListener('click', function() {
            currentIndex = Array.from(dots).indexOf(this);
            changeImg();
        });
    }
</script>