JavaScript 原生態幻燈片切換

時間 2019-11-09

原文原文鏈接

<!doctype html> <html> <head> <title> 幻燈片效果聯繫 </title> <style type="text/css"> body{background-color: #373737;} body, ul, li, a, img{margin: 0px; padding: 0px;} .box{width: 600px; height: 400px; background-color: #FFFFFF; margin: 0px auto; position: relative; overflow: hidden;} .box #ImgBox{width: 1200px; height: 400px; position: absolute; left: 0px; top: 0px;} .box #ImgBox ul{} .box #ImgBox li{float: left; list-style-type: none;} .box #ImgBox img{width: 600px; height: 400px; display: block;} .box .ImgNum{position: absolute; left: 0px; bottom: 10px; width: 100%; text-align: center;} .box .ImgNum a{width: 20px; height: 5px; background-color: #FFFFFF; overflow: hidden; display: inline-block; margin: 0px 2px;} .box .ImgNum .active{background-color: #FF7700;} </style> <script type="text/javascript"> function move(num) { var p1 = document.getElementById("p1"); var p2 = document.getElementById("p2"); if(num == 1) { document.getElementById("ImgBox").style.left = "0px"; p2.setAttribute("class", ""); p1.setAttribute("class", "active"); } else { document.getElementById("ImgBox").style.left = "-600px"; p1.setAttribute("class", ""); p2.setAttribute("class", "active"); } } </script> </head> <body> <div class="box"> <ul id="ImgBox"> <li><a href="#"><img src="banner_01.jpg" /></a></li> <li><a href="#"><img src="banner_02.jpg" /></a></li> </ul> <ul class="ImgNum"> <a id="p1" class="active" href="#" onmouseover="move(1)"></a> <a id="p2" href="#" onmouseover="move(-1)"></a> </ul> </div> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。