<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图片轮换</title> <style> .scroll{ width: 360px; height: 190px; overflow: hidden; margin: 0 auto; position: relative; } a{ font-size: 14px; color: #f4ff27; height: 18px; width: 20px; border: 1px solid #ffef33; text-decoration: none; display: block; float: left; margin-right:5px; text-align: center; background-color: #FFF; line-height: 20px; } a:hover { font-size: 14px; font-weight: bold; color: #FFF; background-color: #fff526; border: 1px solid #fff916; text-decoration: none; display: block; } #num { position:absolute; width:180px; height:25px; z-index:2; left:100px; top: 13px; } </style> </head> <body> <div class="scroll"> <div id="num"> <a href="#" οnmοuseοver="ddd(1)">1</a> <a href="#" οnmοuseοver="ddd(2)">2</a> <a href="#" οnmοuseοver="ddd(3)">3</a> <a href="#" οnmοuseοver="ddd(4)">4</a> <a href="#" οnmοuseοver="ddd(5)">5</a> </div> <img src="1.gif" alt="图片" id="photo"/> </div> <script> function ddd(meno) { var it=document.getElementById("photo"); if(meno==1){ it.setAttribute("src","d/1.gif") }else if(meno==2){ it.setAttribute("src","d/2.gif") }else if(meno==3){ it.setAttribute("src","d/3.jpg") }else if(meno==4){ it.setAttribute("src","d/4.jpg") }else { it.setAttribute("src","d/5.gif") } } </script> </body> </html>
第三章1
最新推荐文章于 2020-01-30 19:44:36 发布