今天在http://www.w3cfuns.com/notes/20618/7af828f7b6b7f9d1bb127a9cfbb3267c上看到这个效果，所以拿来练练手，太久没动脑子了，得让它活动活动。
轮播效果：
在该文章的基础上，我自己添加了自动轮播的效果
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>手风琴切换</title> 6 </head> 7 <style type="text/css"> 8 .ts { 9 overflow: hidden; 10 width: 1072px; 11 margin: 0 auto; 12 } 13 .ts-ul { 14 overflow: hidden; 15 width: 100%; 16 height: 500px; 17 margin: 0 auto; 18 padding: 0; 19 } 20 .ts-ul li { 21 list-style-type: none; 22 overflow: hidden; 23 float: left; 24 width: 95px; 25 -webkit-transition: width 0.5s; 26 } 27 .ts-ul b { 28 -webkit-transition: all 0.5s; 29 width: 95px; 30 display: block; 31 height: 440px; 32 text-indent: -9999em; 33 background: url(http://gyc.woniu.com/tg/ad6/images/ts.jpg); 34 } 35 36 .ts-ul-li1 { 37 background: url(http://gyc.woniu.com/tg/ad6/images/ts1_on.jpg) no-repeat; 38 } 39 40 .ts-ul-li2 { 41 background: url(http://gyc.woniu.com/tg/ad6/images/ts2_on.jpg) no-repeat; 42 } 43 44 .ts-ul-li3 { 45 background: url(http://gyc.woniu.com/tg/ad6/images/ts3_on.jpg) no-repeat; 46 } 47 .ts-ul-li4 { 48 background: url(http://gyc.woniu.com/tg/ad6/images/ts4_on.jpg) no-repeat; 49 } 50 .ts-ul li.on { 51 width: 787px; 52 } 53 .ts-ul li.on b{ 54 opacity: 0; 55 filter: Alpha(opacity=0); 56 } 57 .ts-ul-li1 b { 58 background-position: 0 0 59 } 60 .ts-ul-li2 b { 61 background-position: -95px 0 62 } 63 .ts-ul-li3 b { 64 background-position: -190px 0 65 } 66 .ts-ul-li4 b { 67 background-position: -285px 0 68 } 69 </style> 70 71 <body> 72 <div class="ts"> 73 <ul class="ts-ul"> 74 <li class="ts-ul-li1"><b></b></li> 75 <li class="ts-ul-li2"><b></b></li> 76 <li class="ts-ul-li3"><b></b></li> 77 <li class="ts-ul-li4"><b></b></li> 78 </ul> 79 </div> 80 <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 81 <script type="text/javascript"> 82 $(function() { 83 var li_warp=$('.ts-ul') 84 var totle=li_warp.children('li').length; 85 var index=-1; 86 var timeOut=null; 87 $(".ts-ul li").eq(0).addClass('on'); 88 $(".ts-ul li").hover(function(){ 89 clearInterval(timeOut); 90 $(".ts-ul li").removeClass("on"); 91 $(this).addClass("on"); 92 index=$(this).index(); 93 // console.log(index); 94 },function(){ 95 autoPlay(); 96 }); 97 function autoPlay(){ 98 timeOut=setInterval(function(){ 99 index++; 100 $(".ts-ul li").eq(index).addClass('on').siblings('li').removeClass('on'); 101 if(index==totle){ 102 index=0; 103 } 104 },4000); 105 } 106 autoPlay(); 107 }); 108 </script> 109 </body> 110 111 </html>
感觉每次写来写去都是差不多的，但是真正让自己动手还是有问题，归根到底还是练得太少啊，我都不好意思说自己是做了一年多的前端了呢-_-