HTML——轮播效果

最新推荐文章于 2024-12-11 15:21:57 发布

HBlack1993

最新推荐文章于 2024-12-11 15:21:57 发布

阅读量8.6k

点赞数 1

分类专栏： JAVA WEB

本文链接：https://blog.youkuaiyun.com/HBlack1993/article/details/99673135

版权

该博客介绍如何使用HTML、CSS和JavaScript创建类似电商网站首页的自动轮播效果，用户可以通过鼠标操作暂停轮播并固定在某一张图片上。内容包括轮播区和导航区的HTML结构、CSS样式及JavaScript实现逻辑，特别强调了图片叠加、定时器控制以及鼠标交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面效果：类似与TB，JD等电商网站的首页广告，可以自动轮播，通过鼠标操作可定住某一张图片，同时侧边有可以打开二级菜单的导航栏。

实现代码要点：

将三张图片在同一个div中叠加放置，并设置active样式，只有class中包含active才能显示出来；
设置定时器timer，采取timer除以3取余的方式轮流对三个图片设置active类；
鼠标悬停和点击右下圆点消除定时器，定住当前图片。

代码：
Banner区HTML：

<div class="banner" id="banner">
			<div class="bannarimg active" id="banner1">
				<img src="images/1.jpg">
			</div>
			<div class="bannarimg" id="banner2">
				<img src="images/2.jpg">
			</div>
			<div class="bannarimg" id="banner3">
				<img src="images/3.jpg">
			</div>
		</div>
		<!--"javascript:void(0)"表示按钮是一个超链接，但是该超链接没有任何作用-->
		<a href="javascript:void(0)" class="button next" id="button1"></a>
		<a href="javascript:void(0)" class="button last" id="button2"></a>
		<!--图片右下角的圆点-->
		<div class="dots" id="dots">
			<span class="active"></span>
			<span></span>
			<span></span>
		</div>

Banner区CSS

.main{
	width: 640px;
	height: 400px;
	position: relative;
	margin: 30px auto;
}

.banner{
	width:640px;
	height: 400px;
	position: relative;
}

.bannarimg{
	width:640px;
	height: 400px;
	position: absolute;
	float: left;
	display:none;
}

.banner .active{
	display:block;
}

.main .button{
	width: 20px;
	height:40px;
	position: absolute;
	top: 180px;
	background:url("images/arrow.png") center center rgb(220,220,220,0.3) no-repeat;
}

.main .button:hover{
	background-color: #333;
	opacity: 0.5;
}

.main .last{
	transform: rotate(180deg);
	left:160px;
}

.main .next{
	right:0;
}

.main .dots{
	position: absolute;
	bottom: 10px;
	right: 20px;
}

.main .dots span{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	background-color

最低0.47元/天解锁文章