本文详细介绍了如何使用HTML、CSS和jQuery来创建具备自动切换、左右手动切换及点击圆点切换功能的轮播图。首先通过div+css布局实现静态轮播图，接着引入jQuery实现4秒自动切换，再添加左右点击事件进行手动切换，并在手动切换时优化用户体验，最后实现点击圆点的手动切换，同时更新对应圆点的背景色。
pc端也好、移动端也好，轮播图很常见，今天用html+css+jquery实现小米商城轮播图，套UI框架更容易实现
步骤1：把静态轮播图用div+css布局出来，采用盒子模型、相对绝对定位实现
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
height: 460px;
width: 1000px;
position: relative;
}
.box-img {
position: absolute;
left: 0;
top: 0;
}
.box-img img {
height: 460px;
width: 1000px;
}
/*左右切换*/
.box-left {
position: absolute;
left: 0;
top: 195px;
width: 35px;
height: 70px;
border-radius: 0 5px 5px 0;
text-align: center;
line-height: 70px;
font-size: 27px;
color: #b0afad;
}
.box-left:hover {
background-color: #777777;
color: #ffffff;
}
.box-right {
position: absolute;
right: 0;
top: 195px;
width: 35px;
height: 70px;
border-radius: 5px 0 0 5px;
text-align: center;
line-height: 70px;
font-size: 27px;
color: #b0afad;
}
.box-right:hover {
background-color: #777777;
color: #ffffff;
}
/*圆点*/
.box-dot {
position: absolute;
right: 50px;
bottom: 20px;
}
.box-dot ul {
list-style: none;
padding: 0;
margin: 0;
}
.box-dot ul li {
width: 14px;
height: 14px;
border-radius: 100%;
background-color: #4a5460;
float: left;
margin-right: 10px;
}
.box-dot ul li:hover, .box-dot ul li:nth-child(1) {
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="box">
<!-- 轮播图 -->
<div class="box-img"><img src="static/image/1.jpg"></div>
<div class="box-img"><img src="static/image/2.jpg"></div>
<div class="box-img"><img src="static/image/6.jpg"></div>
<div class="box-img"><img src="static/image/4.jpg"></div>
<div class="box-img"><img src="static/image/5.jpg"></div>
<div class="box-img"><img src="static/image/3.jpg"></div>
<!-- 左右切换 -->
最低0.47元/天 解锁文章
1673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
