图片自动轮播

最新推荐文章于 2022-12-04 09:00:00 发布

小凯爱黑丝

最新推荐文章于 2022-12-04 09:00:00 发布

阅读量652

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_62598638/article/details/121246626

版权

该博客介绍了如何使用JavaScript实现一个自动轮播的图片展示功能，每1000毫秒自动切换到下一张图片。代码示例中包含了一个包含五张图片的轮播，并设置了当索引超过最大值时重置为第一张图片的逻辑。这是一个基础的前端开发实践，适合初学者学习。

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

1000毫秒自动播放下一张图片

一个五张图片的轮播，可根据情况修改

JS代码

window.onlad=function(){
    //获取img标签
    var img=document.getElementById("img1");
    //创建一个数组来保存图片
    var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
    //创建一个变量，用来保存当前图片索引
    var index=0;
    //开启定时器自动切换图片
    setInterval(function(){
    	//使索引自增
    	index++；
       //判断索引是否超过最大索引
       if(index>=imgArr.length){
           //将index设置为0
           index=0;       
       };
       //修改img1的src属性
       img1.src=imgArr[index]       
    },1000);
};

学习阶段

欢迎反馈问题