大图轮播
图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #tu{ width:700px; height:500px; float:left; } .img{ display:none;} </style> </head> <body> <div id="tu"> <img class="img" style="display:block" src="9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" width="700" height="500" /> <img class="img" src="44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg" width="700" height="500" /> <img class="img" src="77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg" width="700" height="500" /> <img class="img" src="32680e0e-45e3-45e5-8ccf-f5faa452c22a.jpg" width="700" height="500" /> <img class="img" src="2184009b-c1d9-4376-8ac9-e396016efc56.jpg" width="700" height="500" /> </div> </body> <script type="text/javascript"> window.setInterval("Huan()",1000); var sy = 0; function Huan() { var img = document.getElementsByClassName("img"); sy++; if(sy>=img.length) { sy = 0; } for(var i=0;i<img.length;i++) { img[i].style.display = "none"; } img[sy].style.display = "block"; } </script> </html>
加入原点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #tu{ width:700px; height:500px; float:left; } .img{ display:none;} #yuandian{ width:500px; height:20px; margin-top:450px; margin-left:-200px; float:left;} .dian{ width:20px; height:20px; border:5px solid red; border-radius:50%; float:left; margin-left:10px; } </style> </head> <body> <div id="tu"> <img class="img" style="display:block" src="9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" width="700" height="500" /> <img class="img" src="44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg" width="700" height="500" /> <img class="img" src="77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg" width="700" height="500" /> <img class="img" src="32680e0e-45e3-45e5-8ccf-f5faa452c22a.jpg" width="700" height="500" /> <img class="img" src="2184009b-c1d9-4376-8ac9-e396016efc56.jpg" width="700" height="500" /> </div> <div id="yuandian"> <div sy="0" class="dian" style="border-color:blue"></div> <div sy="1" class="dian"></div> <div sy="2" class="dian"></div> <div sy="3" class="dian"></div> <div sy="4" class="dian"></div> </div> </body> <script type="text/javascript"> window.setInterval("Huan()",1000); var sy = 0; function Huan() { var img = document.getElementsByClassName("img"); sy++; if(sy>=img.length) { sy = 0; } for(var i=0;i<img.length;i++) { img[i].style.display = "none"; } img[sy].style.display = "block"; var d = document.getElementsByClassName("dian"); for(var j=0;j<d.length;j++) { if(d[j].getAttribute("sy")==sy) { d[j].style.borderColor = "blue"; } else { d[j].style.borderColor = "red"; } } } </script> </html>