<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var container=document.getElementById('container'); var list=document.getElementById('list'); var buttons=document.getElementById('buttons').getElementsByTagName('span'); var zuo=document.getElementById('zuo'); var you=document.getElementById('you'); zuo.onclick=function(){ list.style.left=parseInt(list.style.left)+730+'px'; if (list.style.left>-730) { list.style.left=-2920+'px'; } } you.onclick=function(){ list.style.left=parseInt(list.style.left)-730+'px'; if (list.style.left<-2920) { list.style.left=-730+'px'; } } } </script> <style type="text/css"> *{ margin: 0; padding: 0; text-decoration: none;} body { padding: 20px;} #container{ width: 730px; height: 454px; border: 3px solid #333; overflow: hidden; position: relative; } #list{ width: 4380px; height: 454px; position: absolute; z-index: 1; } #list img{ float: left; } #buttons{ position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 300px; } #buttons span{ cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; } #buttons .on { background: orangered;} .arrow{ cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff; } .arrow:hover { background-color: RGBA(0,0,0,.7);} #container:hover .arrow { display: block;} #zuo { left: 20px;} #you { right: 20px;} </style> </head> <body> <div id="container"> <div id="list" style="left:-730px;"> <img src="img/icon/banner4.jpg" alt="1"/> <img src="img/icon/banner1.jpg" alt="1"/> <img src="img/icon/banner2.jpg" alt="2"/> <img src="img/icon/banner3.jpg" alt="3"/> <img src="img/icon/banner4.jpg" alt="4"/> <img src="img/icon/banner1.jpg" alt="5"/> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> </div> <a href="javascript:;" id="zuo" class="arrow"><</a> <a href="javascript:;" id="you" class="arrow">></a> </div> </body></html>
5 回答
大江ss
TA贡献3条经验 获得超0个赞
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
</div>
<a href="javascript:;" id="zuo" class="arrow"><</a>
<a href="javascript:;" id="you" class="arrow">></a>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消