jQuery实现类似淘宝轮播图

最新推荐文章于 2024-08-27 19:30:26 发布

原创

最新推荐文章于 2024-08-27 19:30:26 发布 · 1.7k 阅读

18 ·

CC 4.0 BY-SA版权

本文记录了使用jQuery实现类似淘宝首页轮播图的过程，包括HTML静态布局、CSS样式设定以及jQuery逻辑功能的详细实现，如自动循环播放、鼠标交互控制、箭头及圆点切换图片等功能。

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

jQuery实现类似淘宝轮播图

本周的作业是写一个类似淘宝首页的jQuery轮播图，这里做出记录。

如有错误，欢迎批评指证。

html实现静态的布局

静态布局分析

一个轮播图静态的部分分为三个

展示区
图片的储存部分
左右按钮
下方小圆点作为提示部分

html部分代码

	<div class="container"> <!-- 展示区 -->
		<div class="photoContainer">
			<img src="img/3.jpg" alt="3" >
			<img src="img/1.jpg" alt="1" >
			<img src="img/2.jpg" alt="2" >
			<img src="img/3.jpg" alt="3" >
			<img src="img/1.jpg" alt="1" >
		</div>
		<ul class="dots">  <!-- 三个小按钮 -->
			<li class="dot"></li>
			<li class="dot"></li>
			<li class="dot"></li>
		</ul>
		<div class="left-triangle"> <!-- 向左的箭头 -->
			<img src="img/left_arrow.png" id="left">
		</div>
		<div class="right-triangle"> <!-- 向右的箭头 -->
			<img src="img/left_arrow.png" id="right">
		</div>
	</div>

css部分

设置展示区 container的样式

.container{
   
   
	width: 600px; 
	height: 400px; /*宽和高可以自己设置*/
	background: black;
	margin:20px auto;
	overflow: hidden; 
	position: relative;
}

利用overflow属性将超出展示区的部分隐藏

图片的容器依靠展示区的容器定位设置position属性

设置图片的容器和图片

.photoContainer{
   
   
	position: absolute;
	left: -600px;
	display: inline-block;
	white-space: nowrap;
}
.photoContainer img{
   
   
	width: 600px;
	height: 400px; /*和展示区的长宽设置为一样的*/
	margin: 0;
	padding: 0;
	display: inline-block;
}

左右箭头的设置

.left-triangle{
   
   
	position: absolute;
	top: 50%;
	left: 0;
	margin-top:-27.2px;
	margin-left:-37px;
	transition: margin-left 1s;
	cursor: pointer