首页>>Jquery图片>>slide滑动 手动控制左右切换多图(2021-04-29)

slide滑动 手动控制左右切换多图

slide滑动 手动控制左右切换多图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="pro-new">  
  2.             <div class="container">  
  3.                 <div class="pro-new-show">  
  4.                     <!--新品列表-->  
  5.                     <div class="pro-list">  
  6.                         <ul>  
  7.                             <li>  
  8.                                 <a href="#">  
  9.                                     <div class="img">  
  10.                                         <img src="images/pic1.png" />  
  11.                                     </div>  
  12.                                     <div class="desc">  
  13.                                         <p class="p-title">产品名称</p>  
  14.                                         <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p>  
  15.                                     </div>  
  16.                                 </a>  
  17.                             </li>  
  18.                             <li>  
  19.                                 <a href="#">  
  20.                                     <div class="img">  
  21.                                         <img src="images/pic1.png" />  
  22.                                     </div>  
  23.                                     <div class="desc">  
  24.                                         <p class="p-title">产品名称</p>  
  25.                                         <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p>  
  26.                                     </div>  
  27.                                 </a>  
  28.                             </li>  
  29.                             <li>  
  30.                                 <a href="#">  
  31.                                     <div class="img">  
  32.                                         <img src="images/pic1.png" />  
  33.                                     </div>  
  34.                                     <div class="desc">  
  35.                                         <p class="p-title">产品名称</p>  
  36.                                         <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p>  
  37.                                     </div>  
  38.                                 </a>  
  39.                             </li>  
  40.                             <li>  
  41.                                 <a href="#">  
  42.                                     <div class="img">  
  43.                                         <img src="images/pic1.png" />  
  44.                                     </div>  
  45.                                     <div class="desc">  
  46.                                         <p class="p-title">产品名称</p>  
  47.                                         <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p>  
  48.                                     </div>  
  49.                                 </a>  
  50.                             </li>  
  51.                             <li>  
  52.                                 <a href="#">  
  53.                                     <div class="img">  
  54.                                         <img src="images/pic1.png" />  
  55.                                     </div>  
  56.                                     <div class="desc">  
  57.                                         <p class="p-title">产品名称</p>  
  58.                                         <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p>  
  59.                                     </div>  
  60.                                 </a>  
  61.                             </li>  
  62.                             <li>  
  63.                                 <a href="#">  
  64.                                     <div class="img">  
  65.                                         <img src="images/pic1.png" />  
  66.                                     </div>  
  67.                                     <div class="desc">  
  68.                                         <p class="p-title">产品名称</p>  
  69.                                         <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p>  
  70.                                     </div>  
  71.                                 </a>  
  72.                             </li>  
  73.                         </ul>  
  74.                     </div>  
  75.                     <!--轮播左右箭头-->  
  76.                     <div class="arrow">  
  77.                         <a class="prev" href="javascript:void(0)"></a>  
  78.                         <a class="next" href="javascript:void(0)"></a>  
  79.                     </div>  
  80.                     <!--轮播分页-->  
  81.                     <div class="pagination">  
  82.                         <ul></ul>  
  83.                     </div>  
  84.                 </div>  
  85.             </div>  
  86.         </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.             //轮播  
  3.             $(".pro-new-show").slide({  
  4.                 mainCell: ".pro-list ul",  
  5.                 titCell:".pagination ul",  
  6.                 autoPage: true,  
  7.                 effect: "left",  
  8.                 autoPlay: false,  
  9.                 vis: 3,  
  10.                 trigger: "click"  
  11.             });  
  12.         </script>  

 


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