JavaScript 简易版自动轮播手动轮播菜鸟交流

本人刚刚接触前端，许多知识还不了解，以前经常到博客园查询自己需要的东西，现在也终于反客为主了。作为新手，所展示的东西也是浅显易懂，希望同是新手的伙伴们共同交流、共同进步，若是成功捕获一位大大，也请您赐教。不知道在这里能否有幸找到一位耐心点的师傅，我未来的师傅啊，快来这里啊~~

不说废话了，直接上代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             img {

                 border: 5px solid tan;

             }

             span {

                 padding: 5px;

                 border: 1px solid;

                 position: relative;

                 top: -28px;

                 left: 4px;

                 cursor: pointer;

             }

         </style>

     </head>

     <body>

         <img src="../img/pro_01.jpg" id="imgs" />

         <span id="img" onclick="onShow(1)" >1</span>

         <span id="img" onclick="onShow(2)" >2</span>

         <span id="img" onclick="onShow(3)" >3</span>

         <span id="img" onclick="onShow(4)" >4</span>

         <script type="text/javascript">

             function onShow(num) {

                 var img = document.getElementById("imgs");

                 var imgs = document.getElementsByTagName("img")

                 for(var i = 0; i < imgs.length; i++) {

                 }

                 img.src = "../img/pro_0" + num + ".jpg";

             }

             var count = 1;

             setInterval(function() {

                 count++;

                 if(count == 5) {

                     count = 1;

                 }

                 onShow(count);

             }, 3000)

         </script>

     </body>

 </html>

效果图：

JavaScript 简易版自动轮播手动轮播菜鸟交流-LMLPHP

span标签应该美化些，但目前本人还没有思路，希望大大们指导！

2017-04-09

动轮播

JavaScript 简易版 自动轮播 手动轮播 菜鸟交流

JavaScript 简易版自动轮播手动轮播菜鸟交流