jquery轮播图插件unslider

首先引入jQuery和unslider

我用的thinkphp3.2.3

[javascript]  view plain  copy

1. <script type="text/javascript"src="__PUBLIC__/S7meijia/static/js/unslider/jquery-1.11.1.min.js"></script>  
2. <script type="text/javascript" src="__PUBLIC__/S7meijia/static/js/unslider/unslider.min.js"></script>  

[css]  view plain  copy

1. .box_img{width: 1920px;height: 600px;overflow: hidden;}  
2. .box_img ul li{}  
3. .box_img ul li a{display: block;width: 1200px;height: 366px;font-size: 100px;text-align: center;line-height: 250px;color: #fff;}  
4.   
5. .box_tab{width:100px;height:30px;position:relative;top:-270px;bottom: 0;text-align: center;width: 1200px;}  
6. .box_tab a{display: inline-block;padding: 2px 10px;font-size: 10px;background: #fff;margin: 0 2px;color: #333;width:50px;}  
7. .box_tab a.active{background: #09b;color: #fff;}  

[html]  view plain  copy

1. <div class="box_img">    
2.                     <ul>    
3.                         <li><img src="1" alt=""/></li>    
4.                     <li><img src="2" alt=""/></li>    
5.                         <li><img src="3" alt=""/></li>    
6.                     <li><img src="4" alt=""/></li>    
7.             <li><img src="5" alt=""/></li>    
8.                     <li><img src="6" alt=""/></li>    
9.                     </ul>    
10. <div class="box_tab"></div>    
11. </div>    

[javascript]  view plain  copy

1. $(document).ready(function(e) {  
2.             var box = $('.box_img').unslider({  
3.                 dots: true,         //显示指示器  
4.                 speed: 1000,        //图片切换  
5.                 delay:5000,         //停留时间  
6.                 fluid:true         //响应式布局  
7.             }),  
8.             data = box.data('unslider');  
9.   
10.             $('.box_tab').click(function() {  
11.                 var fn = this.className.split(' ')[1];  
12.                 data[fn]();  
13.             });  
14.         });  

以上仅供参考，亲测有效，里面还有很多用法，请参考插件用法。

下载地址： 百度云盘         密码：q2z3