如何用 jQuery 实现轮播图（有详解注释）
两份代码（效果图稍有不同）
**
不要忘记引入 jQuery.js文件
**
第一份代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 300px;
height: 300px;
border: 1px solid red;
}
#box img{
position: absolute;
display: none;
}
#box :first-child{
display: block;
}
.page{
list-style:none;
display:flex;
width: 150px;
justify-content: space-around;
position: absolute;
top: 260px;
margin-left: 75px;
}
.page li{
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
line-height: 20px;
color: white;
border: 1px solid white;
cursor: pointer;
}
.active{
background-color: red;
}
#ctrl{
width: 280px;
height: 20px;
margin-left: 10px;
display:flex;
justify-content: space-between;
position: absolute;
top: 130px;
}
</style>
<script src="../js/jquery-3.4.1.min.js"> </script>
</head>
<body>
<div id="box">
<img src="img/1.jpg" >
<img src="img/2.jpg" >
<img src="img/3.jpg" >
<img src="img/4.jpg" >
</div>
<ul class="page" id="page">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="ctrl">
<button type="button" id="prev"><<</button>
<button type="button" id="next">>></button>
</div>
<script type="text/javascript">
//给图片加----绝对定位，让图片摞起来
//通过下标----显示当前，其它兄弟图片隐藏
var index 
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
