首页 > 代码库 > JavaScript 简易版 自动轮播 手动轮播 菜鸟交流

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="http://www.mamicode.com/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 = "http://www.mamicode.com/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>

 效果图:

技术分享技术分享技术分享技术分享

 

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

2017-04-09

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