JavaScript-最基础的带按钮轮播图

最新推荐文章于 2023-02-18 14:57:17 发布

原创

最新推荐文章于 2023-02-18 14:57:17 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#js #css #html

这篇博客介绍了如何使用JavaScript、CSS和HTML创建一个基础的带按钮轮播图。通过HTML构建界面，CSS进行样式设置，JavaScript实现图片的自动轮播和按钮控制。在JavaScript中，定义了显示编号的控制器和更换显示的函数show()，并详细解释了为何使用匿名函数调用show以及如何处理按钮事件和计时器，确保轮播效果的正确运行。

预览：
在这里插入图片描述

首先在HTML和CSS下构造一下界面
HTML代码部分

	<!-- 轮播图片部分-->
	<div id='banner' class="div1">
		<img src="images/ad-01.jpg" alt="" id='bg1'>
		<img src="images/ad-02.jpg" alt="" id='bg2' class="hidden">
		<img src="images/ad-03.jpg" alt="" id='bg3' class="hidden">
		<img src="images/ad-04.jpg" alt="" id='bg4' class="hidden">
	</div>
	
	<!-- 按钮部分-->
	<div id=