<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .banner{ width: 650px; height: 130px; position: relative; } .btn{ position: absolute; bottom: 10px; right: 10px; } .btn span{ display: inline-block; color: red; width: 20px; text-align: center; margin-right: 5px; border: #FFF solid 2px; } </style> <script type="text/javascript"> window.onload = function(){ var arr = new Array; arr[0] = "http://pic2.ooopic.com/10/93/86/00b1OOOPIC79.jpg"; arr[1] = "http://pic2.ooopic.com/10/59/05/79b1OOOPICde.jpg"; arr[2] = "http://pic2.ooopic.com/10/58/57/39b1OOOPIC96.jpg"; var cont = 0; function palys(){ if (arr.length == cont) cont = 0; document.getElementById("banner").src = arr[cont]; cont++; } var times = setInterval(palys,2000); function cleartimes(){ clearInterval(times); } function show(num){ cleartimes(); var index = parseInt(num); document.getElementById("banner").src = arr[index - 1]; cont = index; } } </script> </head> <body> <div> <img src="http://pic2.ooopic.com/10/93/86/00b1OOOPIC79.jpg" width="650;" height="130" id="banner" /> <div> <span onmouseover="show(1)">1</span> <span onmouseover="show(2)">2</span> <span onmouseover="show(3)">3</span> </div> </div> </body> </html>
不偏不易
Accompany
相关分类