JS图片切换效果实现

wxk_前端开发

于 2018-07-13 14:07:29 发布

阅读量542

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/m0_37058714/article/details/81029702

本文详细介绍了如何使用JavaScript实现图片的动态切换效果，包括点击按钮切换、定时自动切换等多种常见方式，适合前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <button id="btn1">ON</button><button id="btn2">OFF</button><br>
    <img src="images/0.jpg" alt="" id="pic">
    <script type="text/javascript">
        //获得图片对象
        var pic=document.getElementById('pic');
        var i=0;//图片名称编号  默认显示第一张
        var timer;
        var isTrue=false;//标识是否已经启动了一个定时器  false未启动
        //点击事件
       document.getElementById('btn1').onclick=function(){
                if(isTrue){
                    return;//不再启动新的定时器
                }
                timer=setInterval(function(){
                    //当到达之最后一张图片时让图片的编号返回到第一张
                     if (i==3) {
                        i=0;
                     }
                     i++;
                    pic.src='images/'+i+'.jpg';
                },1000);
                isTrue=true;//把定时器改为启动状态
       };
       document.getElementById('btn2').onclick=function(){
            clearInterval(timer);
            isTrue=false;//定时器恢复为为启动状态
       };
    </script>
</body>

实现效果如下：