一秒换图（定时）

最新推荐文章于 2023-11-30 14:10:35 发布

淡漠爱清凉

最新推荐文章于 2023-11-30 14:10:35 发布

阅读量298

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Mr_115/article/details/127661654

版权

储存图库（定义排序）

<body>
    <img src="./image/1.jpg" alt="" width="320" height="260">

    <script>
        //1.定义变量：和图片的名称可以对应
        var num=1
        function changeImg(){
            //2.获取img
            let image=document.querySelector('img')
            image.src='./image/'+num+'.jpg'
            num++
            if(num>10){
                num=1
            }
        }
        //3.创建定时器
        setInterval(changeImg,1000)
    </script>
</body>

储存图库（定义数组、遍历数组）

<body>
    <img src="./image/1.jpg" alt="t" style="width: 320px;height:260px;position: relative;top: 20px;left: 200px;">

    <script>
        //2、每隔1秒钟切换一张图片
        window.onload = function () {
            var img = document.getElementsByTagName('img')[0];
            // console.log(img);
            var arr = ['./image/1.jpg', './image/2.jpg', './image/3.jpg', './image/4.jpg', './image/5.jpg', './image/6.jpg', './image/7.jpg', './image/8.jpg', './image/9.jpg', './image/10.jpg'];
            // console.log(arr);
            var n = 0;
            function image() {
                n++;
                if (n >= arr.length) {
                    n = 0;
                }
                console.log(n);
                img.src = arr[n];
            }
            setInterval(image, 1000);
        }
    </script>
</body>