JavaScript 原生态幻灯片切换

时间：2014-10-20 15:29:57 阅读：189 评论：0 收藏：0 [点我收藏+]

<!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>

JavaScript 原生态幻灯片切换

标签：style color io os ar java sp div on

原文地址：http://my.oschina.net/u/1468096/blog/335397

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行