我是靠谱客的博主 顺利溪流,这篇文章主要介绍html轮播图如何实现,现在分享给大家,希望可以做个参考。

本教程操作环境:windows7系统、html5版,DELL G3电脑。

html轮播图的实现方法:

1、使用一个控件作为图片显示区域,且图片都在相同的区域显示;

2、通过Js写个遍历函数,每次只让一张图片显示,如style = " display:none "可以影藏其他图片;

3、通过定时器每隔一段时间调用该函数;

4、这里测试的图片是手动添加的地址,可以根据实际需要循环添加;

Html、Javascript:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!-- 语言: Html、Css、Javascript --> <!-- 工具: HbuilderX --> <!-- 使用Ctrl+/ 可快速多行注释/取消注释 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图测试</title> <!-- 外部导入Css文件,链接式 --> <link type="text/css" rel="stylesheet" href="css/slideShow.css"/> </head> <body> <p>测试轮播图</p> <hr id="hr1"/> <!-- 建立一个div控件作为图片框 --> <div class="imgBox"> <!-- alt:图片路径失败时替换显示内容 --> <img class="img-slide img" src="img/img1.jpg" alt="img1"> <img class="img-slide img" src="img/img2.jpg" alt="img2"> <img class="img-slide img" src="img/img3.jpg" alt="img3"> <img class="img-slide img" src="img/img4.jpg" alt="img4"> <img class="img-slide img" src="img/img5.jpg" alt="img5"> </div> </body> <script type="text/javascript"> // index:索引, len:长度 var index = 0, len; // 类似获取一个元素数组 var imgBox = document.getElementsByClassName("img-slide"); len = imgBox.length; imgBox[index].style.display = 'block'; // 逻辑控制函数 function slideShow() { index ++; // 防止数组溢出 if(index >= len) index = 0; // 遍历每一个元素 for(var i=0; i<len; i++) { imgBox[i].style.display = 'none'; } // 每次只有一张图片显示 imgBox[index].style.display = 'block'; } // 定时器,间隔3s切换图片 setInterval(slideShow, 3000); </script> </html>
登录后复制

Css:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 标签选择器 */ p { text-align: center; font-size: 25px; color: cadetblue; font-family: fantasy; } /* id选择器 */ #hr1 { background-color: cadetblue; height: 2px; width: 75%; } /* 类选择器 */ .imgbox { border-top: 5px solid cadetblue; /* 避免因窗口变化影响图片效果 */ width: 60%; height: 40%; margin: 0 auto; } .img { width: 60%; height: 40%; margin: 0 auto; display: none; }
登录后复制

运行效果:

a3e86c03a1bfbfbb5cee5e9c61ea9fb.png

以上就是html轮播图如何实现的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是顺利溪流最近收集整理的关于html轮播图如何实现的全部内容,更多相关html轮播图如何实现内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(479)

评论列表共有 0 条评论

立即
投稿
返回
顶部