使用jquery如何实现图片自动更换而且是定时的

2024年11月15日 19:51

有1个网友回答

网友（1）：




    
        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid pink;
        }

        .box img {
            display: inline-block;
            width: 100%;
            height: 100%;
        }

    $(function () {
        var imgArr = [
            "./img/0.png",
            "./img/1.png",
            "./img/2.png",
            "./img/3.png",
            "./img/4.png",
        ];
        $(".box img").attr("src", imgArr[0]);
        var i = 0;
        setInterval(function () {
            i++;
            if (i > imgArr.length - 1) {
                i = 0
            }
            $(".box img").attr("src", imgArr[i]);
        }, 2000);
    })

上面是代码：

实现原理是通过间隔定时器，每过2秒去设置img的src属性。

imgArr是保存图片的数组，当每一张图片都展示后重头再开始

imgArr的值是一张张图片我这里是在img文件夹下放了5张图片，题主可以根据自己的需求选择网上或者本地图片。

代码效果：