图片切换的实现_图片间切换像撕日历一样怎么实现-优快云博客

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124049780

本文介绍了如何使用HTML和CSS实现一个简单的图片轮播，并通过JavaScript管理定时器，确保每次点击开始按钮只启动一个定时器，避免了多定时器导致的图片快速切换问题。关键代码展示了清除上一个定时器和图片切换逻辑的改进。

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

简单的实现

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
              *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 580px;
            margin: 50px auto;
            padding: 10px;
            background-color: rgb(247, 223, 227); 
            /* 居中 */
            text-align: center;
        }
        img{  
           width: 100%;
           height: 326px;
           /* 根据正常比例对图片进行裁剪,前提是定义好图片的长宽，这样他才会有参照去进行裁剪 */
           object-fit: cover;
        }
    </style>
    <script>
        window.onload =function(){
            var img1 = document.getElementById("img1");
            var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
            var index = 0;//当前图片的索引

            // 获取定时器
            setInterval(function(){
                index++;
                // if(index >=imgs.length){
                //     index = 0;
                // }
                // 或者
                index = index % imgs.length;
                img1.src = imgs[index]; 
            },1000);

        }
    </script>
</head>
<body>
    <div id="outer">
   <img id="img1" src="img/1.jpg" /> 
   </div>
    
</body>
</html>

效果：
在这里插入图片描述
图片每隔 1s 切换一张。

实现图片播放的开始和停止

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
              *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 580px;
            margin: 50px auto;
            padding: 10px;
            background-color: rgb(247, 223, 227); 
            /* 居中 */
            text-align: center;
        }
        img{  
           width: 100%;
           height: 326px;
           /* 根据正常比例对图片进行裁剪,前提是定义好图片的长宽，这样他才会有参照去进行裁剪 */
           object-fit: cover;
        }
    </style>
    <script>
        window.onload =function(){
            var btn =document.getElementById("btn");
            var btn2 =document.getElementById("btn2");
            var img1 = document.getElementById("img1");
            var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
            var index = 0;//当前图片的索引
            var timer;


            btn.onclick = function(){
            // 获取定时器
            timer = setInterval(function(){
                index++;
                // if(index >=imgs.length){
                //     index = 0;
                // }
                // 或者
                index = index % imgs.length;
                img1.src = imgs[index]; 
            },1000);
            }

            btn2.onclick = function(){
                clearInterval(timer);
            }



        }
    </script>
</head>
<body>
    <div id="outer">
   <img id="img1" src="img/1.jpg" /> 

   <!-- 点击开始才进行移动 -->
   <button id ="btn" >开始</button>
   <button id ="btn2" >停止</button>
   </div>
   
    
</body>
</html>

效果：
在这里插入图片描述
问题：每点击一次开始按钮就会生成一个定时器，如果连续多次点击开始按钮就会生成多个定时器，多个定时器一起作用，图片的切换就会很快，而且此时停止按钮只能获取最新产生的那个定时器没这样就会关不了其他定时器，图片一直快速播放。
所以：在开启定时器之前，需要将上一个定时器关闭clearInterval(timer);

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
              *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 580px;
            margin: 50px auto;
            padding: 10px;
            background-color: rgb(247, 223, 227); 
            /* 居中 */
            text-align: center;
        }
        img{  
           width: 100%;
           height: 326px;
           /* 根据正常比例对图片进行裁剪,前提是定义好图片的长宽，这样他才会有参照去进行裁剪 */
           object-fit: cover;
        }
    </style>
    <script>
        window.onload =function(){
            var btn =document.getElementById("btn");
            var btn2 =document.getElementById("btn2");
            var img1 = document.getElementById("img1");
            var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
            var index = 0;//当前图片的索引
            var timer;

            btn.onclick = function(){

            // 开始定时器之前先将当前元素上的上一个定时器关闭
            clearInterval(timer);
            // 获取定时器
            timer = setInterval(function(){
                index++;
                // if(index >=imgs.length){
                //     index = 0;
                // }
                // 或者
                index = index % imgs.length;
                img1.src = imgs[index]; 
            },1000);
            }

            btn2.onclick = function(){
                clearInterval(timer);
            }



        }
    </script>
</head>
<body>
    <div id="outer">
   <img id="img1" src="img/1.jpg" /> 

   <!-- 点击开始才进行移动 -->
   <button id ="btn" >开始</button>
   <button id ="btn2" >停止</button>
   </div>
   
    
</body>
</html>