首页 > 代码库 > 原生--简易无缝选项卡
原生--简易无缝选项卡
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 html,body{ 13 overflow: hidden; 14 } 15 #wrap { 16 width: 700px; 17 height: 350px; 18 border: #000 1px solid; 19 margin: 50px auto; 20 position: relative; 21 overflow:hidden; 22 } 23 24 #wrap ul { 25 height: 350px; 26 position:absolute; 27 left:0; 28 top: 0; 29 } 30 #wrap ul li{ 31 width: 700px; 32 height: 350px; 33 float: left; 34 } 35 #wrap ul li img { 36 width: 700px; 37 height: 350px; 38 } 39 #wrap ol { 40 width: 425px; 41 height:30px; 42 position:absolute; 43 left: 50%; 44 bottom: 10px; 45 margin-left: -212px; 46 } 47 #wrap ol li { 48 width:80px; 49 height: 30px; 50 float:left; 51 margin-right: 5px; 52 background:#000; 53 position: relative; 54 } 55 56 #wrap ol li span{ 57 width: 0; 58 height: 30px; 59 position:absolute; 60 left: 0; 61 top: 0; 62 background: #c00; 63 } 64 #wrap .next a{ 65 width: 60px; 66 height: 40px; 67 border: 1px solid #000; 68 font-size: 30px; 69 text-align: center; 70 line-height: 40px; 71 color: #fff; 72 position: absolute; 73 right:0; 74 top:50%; 75 margin-top:-20px; 76 } 77 #wrap .prev a{ 78 width: 60px; 79 height: 40px; 80 border: 1px solid #000; 81 font-size: 30px; 82 text-align: center; 83 line-height: 40px; 84 color: #fff; 85 position: absolute; 86 left:0; 87 top:50%; 88 margin-top:-20px; 89 } 90 </style> 91 <script src=http://www.mamicode.com/"move.js"></script> 92 <script> 93 94 window.onload = function(){ 95 var oWrap = document.getElementById(‘wrap‘); 96 var oUl = oWrap.children[0]; 97 var aLi = oUl.children; 98 var oOl = oWrap.children[1]; 99 oUl.style.left=‘-700px‘;100 var aSpan = oOl.getElementsByTagName(‘span‘);101 oUl.style.width = aLi.length * aLi[0].offsetWidth + ‘px‘;102 var iNow = 1;103 var timer=null;104 show();105 function show(){106 clearInterval(timer);107 timer=setInterval(function(){108 iNow++;109 if(iNow==aLi.length){110 iNow=2;111 oUl.style.left=‘-700px‘;112 }113 move(oUl,{114 left:-700*iNow115 });116 117 },1200);118 }119 }120 </script>121 </head>122 123 <body>124 <div id="wrap">125 <ul>126 <li><img src=http://www.mamicode.com/"img/img/4.jpg"></li>127 <li><img src=http://www.mamicode.com/"img/img/0.jpg"></li>128 <li><img src=http://www.mamicode.com/"img/img/1.jpg"></li>129 <li><img src=http://www.mamicode.com/"img/img/2.jpg"></li>130 <li><img src=http://www.mamicode.com/"img/img/3.jpg"></li>131 <li><img src=http://www.mamicode.com/"img/img/4.jpg"></li>132 <li><img src=http://www.mamicode.com/"img/img/0.jpg"></li> 133 </ul>134 <div class="next" id="next"><a href=http://www.mamicode.com/"javascript:;">next</a></div>135 <div class="prev" id="prev"><a href=http://www.mamicode.com/"javascript:;">prev</a></div>136 </div>137 </body>138 </html>
原生--简易无缝选项卡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。