今天有点空，写了个图片轮播的效果，使用了jq，直接上代码吧。
效果： 图片轮播图
更多特效：Jeff Zhong's Demo
html如下：
1 <div class="wrap"> 2 <div id="leftBtn" class="btn fl"><i class="icon-left-open"></i></div> 3 <div id="rightBtn" class="btn fr"><i class="icon-right-open"></i></div> 4 <ul class="pics clearfix"> 5 <li><img src="http://oncse3u6r.bkt.clouddn.com/matishi5.jpg" alt="" /></li> 6 <li><img src="http://oncse3u6r.bkt.clouddn.com/qicaidx7.jpg" alt="" /></li> 7 <li><img src="http://oncse3u6r.bkt.clouddn.com/yueyaquan3.jpg" alt="" /></li> 8 <li><img src="http://oncse3u6r.bkt.clouddn.com/yueliangwan3.jpg" alt="" /></li> 9 <li><img src="http://oncse3u6r.bkt.clouddn.com/jiahe11.jpg" alt="" /></li> 10 <li><img src="http://oncse3u6r.bkt.clouddn.com/mingshashan.jpg" alt="" /></li> 11 <li><img src="http://oncse3u6r.bkt.clouddn.com/mingshashan1.jpg" alt="" /></li> 12 <li><img src="http://oncse3u6r.bkt.clouddn.com/mingshashan2.jpg" alt="" /></li> 13 </ul> 14 </div>
css如下：
1 .wrap{ 2 width: 820px; 3 height: 240px; 4 padding: 30px; 5 overflow: hidden; 6 margin: 0 auto; 7 } 8 .btn{ 9 width: 30px; 10 height: 240px; 11 line-height: 240px; 12 text-align: center; 13 font-size: 20px; 14 cursor: pointer; 15 } 16 .btn:hover{ 17 color: #067ab4; 18 } 19 .fl{float: left;} 20 .fr{float: right;} 21 22 .pics{ 23 list-style-type: none; 24 margin: 0 30px; 25 padding: 0; 26 position: relative; 27 } 28 .pics li{ 29 position: absolute; 30 top:60px;right:380px; 31 width: 160px; 32 height: 120px; 33 background-color: #000; 34 display: none; 35 cursor: pointer; 36 } 37 .pics img{ 38 width: 100%; 39 height: 100%; 40 opacity: 1;filter: alpha(opacity=100); 41 }