JavaScript 原生态幻灯片切换

最新推荐文章于 2021-05-01 01:07:21 发布

weixin_34228617

最新推荐文章于 2021-05-01 01:07:21 发布

阅读量94

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/1468096/blog/335397

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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="#" οnmοuseοver="move(1)"></a>
           <a id="p2" href="#" οnmοuseοver="move(-1)"></a>
       </ul>
   </div>
</body>
</html>

转载于:https://my.oschina.net/u/1468096/blog/335397