原生--简易无缝选项卡
Posted 瞅我干啥？
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生--简易无缝选项卡相关的知识，希望对你有一定的参考价值。
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="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*iNow 115 }); 116 117 },1200); 118 } 119 } 120 </script> 121 </head> 122 123 <body> 124 <div id="wrap"> 125 <ul> 126 <li><img src="img/img/4.jpg"></li> 127 <li><img src="img/img/0.jpg"></li> 128 <li><img src="img/img/1.jpg"></li> 129 <li><img src="img/img/2.jpg"></li> 130 <li><img src="img/img/3.jpg"></li> 131 <li><img src="img/img/4.jpg"></li> 132 <li><img src="img/img/0.jpg"></li> 133 </ul> 134 <div class="next" id="next"><a href="javascript:;">next</a></div> 135 <div class="prev" id="prev"><a href="javascript:;">prev</a></div> 136 </div> 137 </body> 138 </html>
以上是关于原生--简易无缝选项卡的主要内容，如果未能解决你的问题，请参考以下文章