11月15日

轮播图

.整体结构与思路

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">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>
</body>

三个div，最外层id为parent的大div内包含了uls和buttons两个div，divuls中包含了两个列表img_ul（图片列表）, litCir_ul（小圆点列表），divbuttons里则包含了“左”， “右”两个按钮。



  • 图片的宽，高度应和img_ul中的li标签， 以及div #parent， div #uls的宽，高度一致。
  • img_ul的宽度应为(图片数目+1）*每张图片的宽度。也就是要多留出一张图片的宽度（下一部分解释）。
  • div uls部分使用overflow:hidden隐藏img_ul超出的部分，确保每次该区域只能显示一张完整的图片。



posted @ 2021-11-15 18:05  动漫王一博  阅读(28)  评论(0)    收藏  举报