多项目滑动 动画切换效果 分组滑动

多项目滑动 动画切换效果 分组滑动

 js和css文件请到演示页面查看源码获取

演示

 

XML/HTML Code

1. <div class="container">   
2.   
3.             <div class="main">  
4.                 <div id="mi-slider" class="mi-slider">  
5.                     <ul>  
6.                         <li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Boots</h4></a></li>  
7.                         <li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>  
8.                         <li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>  
9.                         <li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>  
10.                     </ul>  
11.                     <ul>  
12.                         <li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Belts</h4></a></li>  
13.                         <li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Hats & Caps</h4></a></li>  
14.                         <li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>  
15.                         <li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>  
16.                     </ul>  
17.                     <ul>  
18.                         <li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Casual</h4></a></li>  
19.                         <li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>  
20.                         <li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Sport</h4></a></li>  
21.                     </ul>  
22.                     <ul>  
23.                         <li><a href="#"><img src="images/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>  
24.                         <li><a href="#"><img src="images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>  
25.                         <li><a href="#"><img src="images/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>  
26.                         <li><a href="#"><img src="images/15.jpg" alt="img15"><h4>Briefcases</h4></a></li>  
27.                     </ul>  
28.                     <nav>  
29.                         <a href="#">Shoes</a>  
30.                         <a href="#">Accessories</a>  
31.                         <a href="#">Watches</a>  
32.                         <a href="#">Bags</a>  
33.                     </nav>  
34.                 </div>  
35.             </div>  
36.         </div><!-- /container -->  

 

JavaScript Code

1.  
2. <script src="js/jquery.catslider.js"></script>  
3. <script>  
4.     $(function() {  
5.   
6.         $( '#mi-slider' ).catslider();  
7.   
8.     });  
9. </script>  

 

原文地址:http://www.freejs.net/article_jquerytupiantexiao_299.html