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

Posted 2020-09-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 简易版自动轮播手动轮播菜鸟交流相关的知识，希望对你有一定的参考价值。

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

不说废话了，直接上代码

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             img {
 9                 border: 5px solid tan;
10             }
11             span {
12                 padding: 5px;
13                 border: 1px solid;
14                 position: relative;
15                 top: -28px;
16                 left: 4px;
17                 cursor: pointer;
18             }
19         </style>
20     </head>
21 
22     <body>
23         <img src="../img/pro_01.jpg" id="imgs" />
24         <span id="img" onclick="onShow(1)" >1</span>
25         <span id="img" onclick="onShow(2)" >2</span>
26         <span id="img" onclick="onShow(3)" >3</span>
27         <span id="img" onclick="onShow(4)" >4</span>
28         <script type="text/javascript">
29             function onShow(num) {
30                 var img = document.getElementById("imgs");
31                 var imgs = document.getElementsByTagName("img")
32                 for(var i = 0; i < imgs.length; i++) {
33                 }
34                 img.src = "../img/pro_0" + num + ".jpg";
35             }
36             var count = 1;
37             setInterval(function() {
38                 count++;
39                 if(count == 5) {
40                     count = 1;
41                 }
42                 onShow(count);
43             }, 3000)
44         </script>
45     </body>
46 </html>