js简单实现照片自动切换

最新推荐文章于 2024-06-27 12:49:37 发布

idolSEN

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量1.1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/yeshuanggw/article/details/113693596

版权

这篇博客详细介绍了如何使用JavaScript实现网页上的图片轮播功能，并结合按钮点击事件进行图片切换。通过设置定时器自动切换图片，同时在按钮被点击时改变图片源，实现了动态与手动切换的结合。此外，还讨论了如何优化代码，避免在按钮切换时自动切换的干扰。

摘要由CSDN通过智能技术生成

网页代码

<div>
    <div><img src="img/1.jpeg" alt="" id="tt"></div>
    <div>
        <button onclick="change(this)" id="vla1" value="0">1</button>
        <button onclick="change(this)" id="vla2" value="1">2</button>
        <button onclick="change(this)" id="vla3" value="2">3</button>
        <button onclick="change(this)" id="vla4" value="3">4</button>
        <button onclick="change(this)" id="vla5" value="4">5</button>
        <button onclick="change(this)" id="vla6" value="5">6</button>
    </div>

照片切换首先需要一个数组包含多块照片链接，然后通过setinterval在规定时间内自动切换，使用document.getElemenntById指定修改对应照片的链接，如上看出六张图片的切换，我们就可以简单的使用一个参数b，当b<6的时候递加，每加一次换一张图片，当=6的时候人，让他转为0，切换成第一张图片

 let a = ["img/1.jpeg", "img/2.jpeg", "img/3.jpeg", "img/4.jpeg", "img/5.jpeg", "img/6.jpeg",]
    let b = 0
   
    function time() {
        b = b + 1
        if (b < 6) {
            document.getElementById('tt').src = a[b]
        } else {
            b = 0
            document.getElementById('tt').src = a[b]
        }
    }

    let int = setInterval("time()", 3000)

接着是按钮切换，就是单纯的点击事件，如上我是设置了六张图片，如果依次使用相同逻辑的函数绑定重复大量代码，我们可以使用this获取对应的id
注意value获取得是字符串，需要用number转换为数字

   function change(obj) {
        let c = document.getElementById(obj.id).value
        document.getElementById('tt').src = a[c]
        b = Number(c)
    }

最后就是点击按钮切换图片的时候会发现，按钮切换图片，但是设置的setInterval一直在自动切换，所以我们需要在按钮按下时候变化前取消时间函数，然后在变化完成后继续3s一切换

   function change(obj) {
        int = clearInterval(int)
        let c = document.getElementById(obj.id).value
        document.getElementById('tt').src = a[c]
        b = Number(c)
        int = setInterval("time()", 3000)
    }