<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>焦点轮播图</title> <style type="text/css"> *{margin: 0;padding: 0;text-decoration: none;} body{padding: 20px;} #container{ width: 600px;height: 400px;border: 3px solid #333;overflow: hidden;position: relative; } #list{width: 4200px;height: 400px;z-index: 1;position: absolute;} #list img{float:left;} #buttons{height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px;position: absolute;} #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;} #prev { left: 20px;} #next { right: 20px;} </style> <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 prev = document.getElementById('prev'); var next = document.getElementById('next'); next.onclick = function(){ list.style.left = parseInt(list.style.left) - 600 + 'px'; } prev.onclick = function(){ list.style.left = parseInt(list.style.left) + 600+'px'; } } </script></head><body> <div id="container"> <div id="list"> <img src="images/5.jpg" alt="1"/> <img src="images/1.jpg" alt="1"/> <img src="images/2.jpg" alt="2"/> <img src="images/3.jpg" alt="3"/> <img src="images/4.jpg" alt="4"/> <img src="images/5.jpg" alt="5"/> <img src="images/1.jpg" alt="5"/> </div> <div id="buttons" style="left: -600px;"> <span index="1"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" id="prev"><</a> <a href="javascript:;" id="next">></a></body></html>
添加回答
举报
0/150
提交
取消