本文详细讲解了如何实现一个简单的轮播图，包括HTML结构、CSS样式和JavaScript功能实现。通过设置HTML布局，CSS定位和隐藏溢出部分，实现无缝滚动效果。JavaScript部分涉及小圆点的动态生成、自动滚动功能、手动切换图片以及触摸滑动事件的响应，为网页增添互动性。
简单轮播图的实现及原理讲解
基本功能
- 自动无缝滚动
- 左右按钮控制滚动
- 点击圆点切换图片
1.整体结构与思路
Html部分
<body>
<div id= "parent">
<div id="uls">
<ul id="img_ul">
<li><img src="imgs/0.jpg"/></li>
<li><img src="imgs/1.jpg"/></li>
<li><img src="imgs/2.jpg"/></li>
<li><img src="imgs/3.jpg"/></li>
<li><img src="imgs/4.jpg"/></li>
</ul>
<ul id='litCir_ul'></ul>
</div>
<div id="buttons">
<span id="left"><</span>
<span id="right">></span>
</div>
</div></body>
三个div，最外层id为parent的大div内包含了uls和buttons两个div，divuls中包含了两个列表img_ul（图片列表）, litCir_ul（小圆点列表），divbuttons里则包含了“左”， “右”两个按钮。
CSS部分
#parent{
position: relative;
margin: 50px auto;
padding: 0;
width: 500px;
height: 309px;}
#uls{
position: relative;
margin: 0;
padding: 0;
width: 500px;
height: 309px;
overflow: hidden;}
#img_ul{
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 3000px; /*多留出一张图片的宽度！*/
list-style: none;}#img_ul li{
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 309px;}#img_ul li img{
width: 500px;
height: 309px;}
#litCir_ul{
position: absolute;
margin: 0;
padding: 0;
right: 10px;
bottom: 10px;
list-style: none;}#litCir_ul li{
margin: 0;
padding: 0;
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin-left:10px ;
cursor: pointer;}
li.active{
background-color: white;}li.quiet{
background-color: #1e90ff;}
#buttons{
margin: 0;
padding: 0;
display: none;}#buttons span{
position: absolute;
width: 40px;
height: 40px;
最低0.47元/天 解锁文章
扫一扫
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
