首页 > 代码库 > 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 简易版 自动轮播 手动轮播 菜鸟交流
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。