首页>>Jquery图片>>多项目滑动 动画切换效果 分组滑动(2014-04-05)

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

 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