利用JS实现简单的轮播图

蔚落 2022-10-05 01:52 217阅读 0赞

**希望能帮到才加入程序员行列的小白~**

# 首先，1.先分析轮播图是如何转换的？ #

实际上，即标签名中“src”值的改变

<img src="">

# 2.其次，分析如何使其改变？ #

利用数组和定时器实现跳转

## 代码部分： ##

HTML：

<div id="banner" style="width:660px;height: 410px;margin: 0 auto;">
            <img style="width: 660px;height: 410px;" src="img/1.jpg" alt="">
    </div>

JavaSript:

var div =   document.getElementById("banner");
    window.onload=function(){ 
        //定义图片名称的数组
        var imgs=["1.jpg","2.jpg","3.jpg","4.jpg"];
        //定义一个变量用来表示数组的下标
        var number=0;
        //定义定时器 每隔4秒转换 更改路径实现转换 setInterval(function(){},时间)-->定时器
        this.setInterval(function(){ 
            number++;//自增，增加下标数，改变图片的下标，达到图片的轮播
            if(number>2){ //当下标数达到最大值时，重新从第一张照片开始
                number=0;//让下标等于0继续自增
            }
            div.firstElementChild.setAttribute("src","img/"+imgs[number]);
        },4000);
    }

## 由此完成整个简单轮播图的运行~ ##

## 代码的产生，其实是程序员在大脑中率先给出的初步构想和思考，经过加工处理后的产物。 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NoYW9fbGVp_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NoYW9fbGVp_size_16_color_FFFFFF_t_70]: /images/20221005/f84b0d5097244486998aaa0c55de591a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS实现简单的轮播图

S实现简单的轮播图 js用面向过程的方法实现简单的轮播图先写好简单的html布局；正常轮播图所要实现的功能有一下几个： 1.banner图的自动切换；...

逃离我推掉我的手/ 2024年04月18日 08:27/ 0 赞/ 95 阅读

相关简单css+js实现轮播图

轮播图由于js+css+html简单实现; 效果为16个cube 点击下一轮![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd...

你的名字/ 2024年04月18日 07:08/ 0 赞/ 92 阅读

相关利用html-js实现简单的轮播图

利用html-js实现简单的轮播图 1、先在html中将页面搭建出来 2、在使用css对页面进行样式的调整 3、使用js设置轮播图的各个元素实现效果展

悠悠/ 2023年07月11日 12:45/ 0 赞/ 21 阅读

相关 JS实现简单的轮播图

1. 用display属性的block或none控制轮播图代码如下： <!DOCTYPE HTML> <head> <met

ゝ一纸荒年。/ 2023年07月06日 06:24/ 0 赞/ 130 阅读

相关 html + js 简单实现轮播图

实现思路如下：设置所有图片的 display 属性为 none 设置一个 index 用来标志获取到的图片设置一个定时器，每隔一段时间令 index 自增并将对应

旧城等待，/ 2022年12月19日 13:16/ 0 赞/ 236 阅读

相关利用JS实现简单的轮播图

希望能帮到才加入程序员行列的小白~ 首先，1.先分析轮播图是如何转换的？实际上，即标签名中“src”值的改变 <img src=""> 2.其次，分析如

蔚落/ 2022年10月05日 01:52/ 0 赞/ 218 阅读

相关利用 transition 简单实现轮播图

轮播图现在应用很广泛。一般的项目大家都用 [swiper][] 这个插件来实现，swiper插件非常强大，它提供了很多应用场景，大家有兴趣可以去看看。如果在实际中写个小d

港控/mmm°/ 2022年09月03日 11:30/ 0 赞/ 215 阅读

相关 js实现简单的轮播图

html+css代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="

刺骨的言语ヽ痛彻心扉/ 2022年04月17日 03:54/ 0 赞/ 286 阅读

相关 js实现简单的轮播图效果

现在大多数网站都会在页面做一个轮播效果，看着舒服，同样的内容能展示更多的内容，很方便，我在今天接触到了这个无缝轮播图，在一番调试下总算是简单实现了效果，不多说，上代码 ht

客官°小女子只卖身不卖艺/ 2022年01月27日 02:19/ 0 赞/ 327 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 707 阅读