首页 > 代码库 > 最基本的javascript native carousel （1）
最基本的javascript native carousel （1）
原理：主要运用z-index这个属性来设置图片的展示和隐藏，代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>zIndex制作轮播图</title> 6 <style> 7 html,body,ul,li,input{margin: 0;padding: 0} 8 .box1{ 9 width: 520px;10 height: 280px;11 margin: 0 auto;12 position: relative;13 border:1px solid black;14 }15 ul{16 width: 520px;17 height: 280px;18 position: relative;19 }20 ul li{21 position: absolute;22 list-style: none;23 }24 ul li a{25 display: block;26 width: 520px;27 height: 280px;28 }29 .btn1{30 position: absolute;31 width: 48px;32 height: 60px;33 background: url(btn.png) no-repeat;34 border:0;35 left: 0;36 top:110px;37 cursor: pointer;38 z-index: 10000;39 }40 .btn2{41 position: absolute;42 width: 48px;43 height: 60px;44 background: url(btn.png) no-repeat -48px;45 border:0;46 right: 0;47 top:110px;48 cursor: pointer;49 z-index: 10000; 50 }51 </style>52 <script>53 window.onload = function(){54 var btn1 = document.getElementsByClassName("btn1")[0];55 var btn2 = document.getElementsByClassName("btn2")[0];//有兼容问题56 var liList = document.getElementsByTagName("ul")[0].children;57 var index = 1;58 var i = 4;59 btn1.onclick = function(){60 i++;61 if(i == 5){62 i = 0;63 }64 liList[i].style.zIndex = index++;65 }66 btn2.onclick = function(){67 i--;68 if(i == -1){69 i = 4;70 }71 liList[i].style.zIndex = index++;72 }73 var timer = setInterval(function(){btn2.onclick();},1000)74 }75 </script>76 </head>77 <body>78 <div class="box1">79 <ul>80 <li><a href=""><img src="5.jpg" alt=""></a></li>81 <li><a href=""><img src="4.jpg" alt=""></a></li>82 <li><a href=""><img src="3.jpg" alt=""></a></li>83 <li><a href=""><img src="2.jpg" alt=""></a></li>84 <li><a href=""><img src="1.jpg" alt=""></a></li>85 </ul>86 <input type="button" name="" class="btn1" />87 <input type="button" name="" class="btn2" />88 </div>89 </body>90 </html>
问题：在这里我们加了一个定时器来让图片自己切换，当我们点击按钮的时候需要关闭定时器，这个可以通过clearInterval(timer)来实现，但是当我们不点击按钮的时候，想让定时器接着我们现在的图片自动轮播下去，这个问题如何解决呢？重新开定时器吗？
最基本的javascript native carousel （1）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。