html + js 简单实现轮播图

旧城等待， 2022-12-19 13:16 205阅读 0赞

实现思路如下：

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

**html代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图实现</title>
        <style type="text/css"> /*标题样式*/ p{ text-align: center; font-size: 25px; color: cadetblue; font-family: fantasy; } .imgBox{ border-top: 2px solid cadetblue; width: 50%; height: 500px; margin: 0 auto; } .imgBox img{ width: 60%; height: 300px; margin: 0 auto; padding-top: 30px; } .img1{ display: block; } .img2{ display: none; } .img3{ display: none; } </style>
    </head>
    <body>
    <p>图片轮播</p>
    <div class="imgBox">
        <img class="img-slide img1" src="images/1.jpg" alt="1">
        <img class="img-slide img2" src="images/2.jpg" alt="2">
        <img class="img-slide img3" src="images/3.jpg" alt="3">
    </div>
    </body>
    <script type="text/javascript"> var index=0; //改变图片 function ChangeImg() { index++; var a=document.getElementsByClassName("img-slide"); if(index>=a.length) index=0; for(var i=0;i<a.length;i++){ a[i].style.display='none'; } a[index].style.display='block'; } //设置定时器，每隔两秒切换一张图片 setInterval(ChangeImg,2000); </script>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 JS实现简单的轮播图

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

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

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

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

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

相关轮播图实现html,html、css、js实现轮播图

2017-03-13 今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。查看具体的效果点击这个链接： http://gjhnstxu.me/%E8

落日映苍穹つ/ 2022年10月10日 09:46/ 0 赞/ 322 阅读

相关 html script轮播图,javascript简单轮播图

\\轮播图实现原理：通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。\\![bV

ゞ浴缸里的玫瑰/ 2022年10月06日 13:57/ 0 赞/ 278 阅读

相关简单html实现图片轮播,JavaScript实现简易轮播图

JavaScript实现简易轮播图 Html代码块： ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jp

小鱼儿/ 2022年10月06日 09:47/ 0 赞/ 326 阅读

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

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

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

相关 html简单实现自动轮播代码怎么写,html + js 简单实现轮播图

哎，刚刚看到自己昨天写的如何实现搜索框获得了两个喜欢哎，真的是开心，感谢你们的喜欢。咳咳，回归正题。今天要分享的是如何利用 html + js 实现轮播图。先来看下效果：

Myth丶恋晨/ 2022年10月05日 10:46/ 0 赞/ 206 阅读

相关自动轮播图html css js代码,js轮播(自动轮播图html代码)

就是给这几个图片弄一个定时器，把图片先定位到一个地方，给定时器一个时间，比如五秒，最初让除了第一个图片外的其他的都消失。前五秒显示的是第一张图片，五秒. 请直接复制我的以下代

比眉伴天荒/ 2022年09月02日 14:57/ 0 赞/ 332 阅读

相关 js实现简单的轮播图

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

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

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

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

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