发表于： 2019-04-06 20:49:29
1 886
今天完成的事情：今天手写了一个导航栏
明天计划的事情：后天计划把轮播图写出来
遇到的问题：轮播图
基本功能
- 自动无缝滚动
- 左右按钮控制滚动
- 点击圆点切换图片
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; top: 50%; margin-top: -20px; line-height: 40px; text-align: center; font-weight: bold; font-family: Simsun; font-size: 30px; border: 1px solid #fff; opacity: 0.3; cursor: pointer; color: #fff; background: black;
}#left{ left: 5px;
}#right{ left: 100%; margin-left: -45px;
}需要注意的地方
- 图片的宽，高度应和
img_ul中的li标签， 以及div#parent， div#uls的宽，高度一致。 img_ul的宽度应为(图片数目+1）*每张图片的宽度。也就是要多留出一张图片的宽度（下一部分解释）。- div
uls部分使用overflow:hidden隐藏img_ul超出的部分，确保每次该区域只能显示一张完整的图片。
收获：进一步了解了导航栏的原理
返回列表
评论