js实现简单轮播图

╰半橙微兮° 2023-02-28 05:22 28阅读 0赞

用js实现一个简单的轮播图，只涉及事件监听。  
功能如下：两个按钮用于翻页，点击上一页就翻上一页，点击下一页就翻下一页，当翻到第一页时，再点击上一页就翻到最后一页；同样，当翻到最后一页时，再点击下一页的话就翻到第一页。具体实现如下：  
html代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70]  
css代码如下：只实现了特别简单的布局  
![在这里插入图片描述][20200720111104476.png]  
js代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70 1]js代码中先用一个数组来存储所有要显示的图片，获取两个按钮，再获取开始再页面中显示的图片的id，设置索引index初始化为0，然后让图片的src等于数组的索引。在对两个按钮绑定点击监听事件，点击上一页时，先判断当前index是不是为0，如果是，就让它等于图片的长度减一（即数组的长度减一），再让img的src指向该数组索引中的图片，否则直接进行减减。同理，下一页的按钮也如此判断，只是先看是不是最后一张图片。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70]: /images/20230209/922215203e204d7e9b4804957051d32f.png
[20200720111104476.png]: /images/20230209/5050a81961b64c4cae4c9887cba1c8e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjA0OTI0_size_16_color_FFFFFF_t_70 1]: /images/20230209/17793b959f904f819c4ae96cdb532a31.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JS实现简单的轮播图

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

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

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

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

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

相关 JS实现简单的轮播图

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

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

相关 js实现简单轮播图

用js实现一个简单的轮播图，只涉及事件监听。功能如下：两个按钮用于翻页，点击上一页就翻上一页，点击下一页就翻下一页，当翻到第一页时，再点击上一页就翻到最后一页；同样，当翻

╰半橙微兮°/ 2023年02月28日 05:22/ 0 赞/ 29 阅读

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

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

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

相关 html原生js实现图片轮播,原生js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器，取代body，这样

冷不防/ 2022年10月06日 07:52/ 0 赞/ 408 阅读

相关 js实现简单的轮播图

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页<

Love The Way You Lie/ 2022年04月06日 07:49/ 0 赞/ 421 阅读

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

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

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

相关轮播图简单实现

如何实现轮播图？根据视频[尚硅谷JavaScript视频][JavaScript]整理得到。思路： ![在这里插入图片描述][2019082110244071

Bertha 。/ 2021年10月24日 05:26/ 0 赞/ 670 阅读