JavaScript实现超简单的图片切换效果

最新推荐文章于 2026-06-17 10:40:45 发布

原创最新推荐文章于 2026-06-17 10:40:45 发布 · 1.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html #前端

收录于

JavaScript小案例专栏收录该内容

1 篇文章

订阅专栏

这篇文章介绍了如何使用JavaScript和模板字符串创建一个简单的图片轮播组件，通过点击按钮实现图片的上下切换，遵循特定的数字顺序排列（1到4）。

图片名称按数字规律排序的，使用了模板字符串

<img class="image" src="./images/1.jpg" alt="">
    <br>
    <button class="up">上一张</button>
    <button class="down">下一张</button>
    <script>
        var image = document.querySelector('.image')
        var minIndex = 1,
            maxIndex = 4,
            currentIndex = minIndex

        document.querySelector('.down').onclick = function() {
            if (currentIndex === maxIndex) {
                currentIndex = minIndex
            } else {
                currentIndex++
            }
            image.setAttribute('src', `./images/${currentIndex}.jpg`)
        }
        document.querySelector('.up').onclick = function() {
            if (currentIndex === minIndex) {
                currentIndex = maxIndex
            } else {
                currentIndex--
            }
            image.setAttribute('src', `./images/${currentIndex}.jpg`)
        }
    </script>