<!DOCTYPE> <html> <meta charset="utf-8"/> <style> .header{ text-align:center; font:40px/70px "微软雅黑"; height:70px; } .firstPart{ position:relative; } .threeWrap{ float:left; width:33.33%; } .threeImg{ width:100%; } .appImg{ width:100%; } .fourLeft{ float:left; width:40%; } .fourRight{ float:left; width:60%; } .fourSubTwo{ float:left; width:50%; } .fifthPart{ clear:both; } .swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float:left; width:100%; position: relative; } /* END required styles */ .pageNum{ text-align:center; list-style:none; margin:0; padding:0 } .pageNum li { display:inline-block; width:10px; height:10px; border-radius:10px; background:#141414; box-shadow:inset 0 1px 3px black,0 0 1px 1px #202020; margin:0 2px; cursor:pointer } .pageNum li.on { box-shadow:inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5); background-color:#1293dc; background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297)); background-image:-webkit-linear-gradient(top,#1293dc,#0f6297); background-image:-moz-linear-gradient(top,#1293dc,#0f6297); background-image:-ms-linear-gradient(top,#1293dc,#0f6297); background-image:-o-linear-gradient(top,#1293dc,#0f6297); background-image:linear-gradient(top,#1293dc,#0f6297) } .pageNum-wrap{ position:absolute; bottom:15px; width:100%; } </style> <body> <div class="header"> 银行网点来宾无线营销解决方案 </div> <div class="firstPart"> <div id=‘slider‘ class=‘swipe‘> <div class=‘swipe-wrap‘> <div><img class="threeImg" src="images/b1.png"/></div> <div><img class="threeImg" src="images/b2.png"/></div> <div><img class="threeImg" src="images/b3.png"/></div> </div> </div> <div class="pageNum-wrap"> <ul class="pageNum" id="pagtionPos"> <li class="on"></li> <li></li> <li></li> </ul> </div> </div> <div class="secondPart"> <div class="threeWrap"> <img class="threeImg" src="images/idx-03.png"/> </div> <div class="threeWrap"> <img class="threeImg" src="images/idx-04.png"/> </div> <div class="threeWrap"> <img class="threeImg" src="images/idx-05.png"/> </div> </div> <div class="thirdPart"> <img class="appImg" src="images/idx-06.png"/> </div> <div class="fouthPart"> <div class="fourLeft"> <img src="images/idx-07.png" width="100%"/> </div> <div class="fourRight"> <div class="fourSubTop"> <img src="images/idx-08.png" width="100%"/> </div> <div class="fourSubBottom"> <div class="fourSubTwo"> <img src="images/idx-09.png" width="100%"/> </div> <div class="fourSubTwo"> <img src="images/idx-10.png" width="100%"/> </div> </div> </div> <div> <div class="fifthPart"> <img src="images/idx-12.png" width="100%"/> </div> </body> <script src="../js/common/swipe/swipe.js"></script> <script> var bullets = document.getElementById(‘pagtionPos‘).getElementsByTagName(‘li‘); window.mySwipe = new Swipe(document.getElementById(‘slider‘), { auto: 1000, callback: function(index) { var i = bullets.length; while(i--){ bullets[i].className=‘‘; } bullets[index].className=‘on‘; } }); </script> </html>
<!DOCTYPE><html><meta charset="utf-8"/><style>.header{text-align:center;font:40px/70px "微软雅黑";height:70px;}.firstPart{position:relative;}.threeWrap{float:left;width:33.33%;}.threeImg{width:100%;}.appImg{width:100%;}.fourLeft{float:left;width:40%;}.fourRight{float:left;width:60%;}.fourSubTwo{float:left;width:50%;}.fifthPart{clear:both;}.swipe { overflow: hidden; visibility: hidden; position: relative;}.swipe-wrap { overflow: hidden; position: relative;}.swipe-wrap > div { float:left; width:100%; position: relative;} /* END required styles */.pageNum{ text-align:center; list-style:none; margin:0; padding:0}.pageNum li { display:inline-block; width:10px; height:10px; border-radius:10px; background:#141414; box-shadow:inset 0 1px 3px black,0 0 1px 1px #202020; margin:0 2px; cursor:pointer}.pageNum li.on { box-shadow:inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5); background-color:#1293dc; background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297)); background-image:-webkit-linear-gradient(top,#1293dc,#0f6297); background-image:-moz-linear-gradient(top,#1293dc,#0f6297); background-image:-ms-linear-gradient(top,#1293dc,#0f6297); background-image:-o-linear-gradient(top,#1293dc,#0f6297); background-image:linear-gradient(top,#1293dc,#0f6297)}.pageNum-wrap{ position:absolute; bottom:15px; width:100%;} </style><body><div class="header">银行网点来宾无线营销解决方案</div><div class="firstPart"><div id=‘slider‘ class=‘swipe‘> <div class=‘swipe-wrap‘> <div><img class="threeImg" src="images/b1.png"/></div> <div><img class="threeImg" src="images/b2.png"/></div> <div><img class="threeImg" src="images/b3.png"/></div> </div></div><div class="pageNum-wrap"> <ul class="pageNum" id="pagtionPos"> <li class="on"></li> <li></li> <li></li> </ul></div></div>
<div class="secondPart"><div class="threeWrap"><img class="threeImg" src="images/idx-03.png"/></div><div class="threeWrap"><img class="threeImg" src="images/idx-04.png"/></div><div class="threeWrap"><img class="threeImg" src="images/idx-05.png"/></div></div>
<div class="thirdPart"><img class="appImg" src="images/idx-06.png"/></div>
<div class="fouthPart"><div class="fourLeft"><img src="images/idx-07.png" width="100%"/></div><div class="fourRight"><div class="fourSubTop"><img src="images/idx-08.png" width="100%"/></div><div class="fourSubBottom"><div class="fourSubTwo"><img src="images/idx-09.png" width="100%"/></div><div class="fourSubTwo"><img src="images/idx-10.png" width="100%"/></div></div></div><div>
<div class="fifthPart"><img src="images/idx-12.png" width="100%"/></div></body><script src="../js/common/swipe/swipe.js"></script><script>var bullets = document.getElementById(‘pagtionPos‘).getElementsByTagName(‘li‘);window.mySwipe = new Swipe(document.getElementById(‘slider‘), {auto: 1000, callback: function(index) { var i = bullets.length; while(i--){ bullets[i].className=‘‘; } bullets[index].className=‘on‘; }}); </script></html>
原文：http://www.cnblogs.com/blueskypan/p/5283556.html