<style>*{margin:0px; padding:0px; text-decoration:0px;} #container{width:1920px; height:520px; overflow:hidden; position:relative;} #list{z-index:1; position:absolute; width:13760px; height:520px;}#buttons{z-index:2; position:absolute; width:150px; height:20px; left:878px; bottom:12px;}#buttons span{cursor:pointer; width:5px; height:5px; border-radius:100px;; float:left; border:2px solid #FFF; margin:8px;}#buttons .on{background:#6C6C6C;}.arrow{cursor:pointer; width:50px; height:50px; position:absolute; top:180px; z-index:2; color:#FFF; background:"black"; font-size:20px; font-weight:10px;}#container:hover .arrow{display:block;}#pre{left:10px;}#next{right:10px;}</style></head><body><div id="container"><div id="list" style="left:-1920px;"><img src="images/6.png" /><img src="images/1.png" /><img src="images/2.png" /><img src="images/3.png"/><img src="images/4.png"/><img src="images/5.png" /><img src="images/6.png" /><img src="images/1.png" /></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span><span index="6"></span><a href="#" class="arrow" id="pre"> </a><a href="#" class="arrow" id="next"> </a></div></div></body></html>
1 回答
已采纳
业余奶茶品鉴师
TA贡献260条经验 获得超388个赞
html 部分代码改为：
<div id="container"> <div id="list" style="left:-1920px;"> <img src="1.jpg" /> <img src="2.jpg" /> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> </div> <a href="#" class="arrow" id="pre"> </a> <a href="#" class="arrow" id="next"> </a> </div>
望采纳
添加回答
举报
0/150
提交
取消