js实现轮播图

最新推荐文章于 2024-04-13 17:28:35 发布

早睡不熬夜937

最新推荐文章于 2024-04-13 17:28:35 发布

阅读量1.5k

点赞数 5

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_65528486/article/details/126254911

版权

用js做一个简单的图片轮播效果。
思路如下：用JavaScript来控制轮播的图片的样式（margin-left）。用计时器来控制图片的自动播放。具有以下功能：1.自动图片轮播 2.鼠标移入当前页面暂停，移出继续播放 3.底下小按钮切换图片。

首先是HTML代码：

<!-- 观察窗口，宽高和一张图片一致s -->
		<div id="show" onmouseover="stopRolling()" onmouseout="startRolling()">
			<div id="dots">
				<div id="dot1" class="dot">1</div>
				<div id="dot2" class="dot">2</div>
				<div id="dot3" class="dot">3</div>
				<div id="dot4" class="dot">4</div>
			</div>
			<div id="content">
				<div id="d1&#