首页>>焦点图>>jQuery轮播图插件slider-pro(2022-03-07)

jQuery轮播图插件slider-pro

带文字介绍的轮播图，参数自己设置

jQuery轮播图插件slider-pro
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="example1" class="slider-pro">  
  2.             <div class="sp-slides">  
  3.                 <div class="sp-slide">  
  4.                     <img class="sp-image" src="../src/css/images/blank.gif"  
  5.                         data-src="../dalian.jpg"  
  6.                         data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>  
  7.                       
  8.                     <p class="sp-layer sp-white sp-padding"  
  9.                         data-horizontal="50" data-vertical="50"  
  10.                         data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">  
  11.                         freejs  
  12.                     </p>  
  13.   
  14.                     <p class="sp-layer sp-black sp-padding hide-small-screen"  
  15.                         data-horizontal="180" data-vertical="50"  
  16.                         data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">  
  17.                         导航菜单  
  18.                     </p>  
  19.   
  20.                     <p class="sp-layer sp-white sp-padding hide-medium-screen"  
  21.                         data-horizontal="315" data-vertical="50"  
  22.                         data-show-transition="left" data-hide-transition="up" data-show-delay="800">  
  23.                         3  
  24.                     </p>  
  25.                 </div>  
  26.   
  27.                 <div class="sp-slide">  
  28.                     <img class="sp-image" src="../src/css/images/blank.gif"  
  29.                         data-src="../dandong.jpg"  
  30.                         data-retina="http://bqworks.com/slider-pro/images/image2_large.jpg"/>  
  31.   
  32.                     <h3 class="sp-layer sp-black sp-padding"   
  33.                         data-horizontal="40" data-vertical="10%"   
  34.                         data-show-transition="left" data-hide-transition="left">  
  35.                         4  
  36.                     </h3>  
  37.   
  38.                     <p class="sp-layer sp-white sp-padding hide-medium-screen"   
  39.                         data-horizontal="40" data-vertical="22%"   
  40.                         data-show-transition="left" data-show-delay="200" data-hide-transition="left" data-hide-delay="200">  
  41.                         5  
  42.                     </p>  
  43.   
  44.                     <p class="sp-layer sp-black sp-padding hide-small-screen"   
  45.                         data-horizontal="40" data-vertical="34%" data-width="350"   
  46.                         data-show-transition="left" data-show-delay="400" data-hide-transition="left" data-hide-delay="500">  
  47.                         6  
  48.                     </p>  
  49.                 </div>  
  50.   
  51.                 <div class="sp-slide">  
  52.                     <img class="sp-image" src="../src/css/images/blank.gif"  
  53.                         data-src="../demo1.jpg"  
  54.                         data-retina="http://bqworks.com/slider-pro/images/image3_large.jpg"/>  
  55.   
  56.                     <p class="sp-layer sp-white sp-padding"   
  57.                         data-position="centerCenter" data-vertical="-50"   
  58.                         data-show-transition="right" data-hide-transition="left" data-show-delay="500" >  
  59.                         1  
  60.                     </p>  
  61.   
  62.                     <p class="sp-layer sp-black sp-padding hide-small-screen"   
  63.                         data-position="centerCenter" data-vertical="50"   
  64.                         data-show-transition="left" data-show-delay="700" data-hide-transition="right" data-hide-delay="200">  
  65.                         2  
  66.                     </p>  
  67.                 </div>  
  68.   
  69.                 <div class="sp-slide">  
  70.                     <img class="sp-image" src="../src/css/images/blank.gif"  
  71.                         data-src="../demo2.jpg"  
  72.                         data-retina="http://bqworks.com/slider-pro/images/image4_large.jpg"/>  
  73.   
  74.                     <p class="sp-layer sp-black sp-padding"   
  75.                         data-position="bottomLeft"  
  76.                         data-show-transition="up" data-hide-transition="down">  
  77.                         各种下拉菜单,导航,多级菜单,右侧展开,左侧展开  
  78.                     </p>  
  79.                 </div>  
  80.   
  81.                 <div class="sp-slide">  
  82.                     <img class="sp-image" src="../src/css/images/blank.gif"  
  83.                         data-src="../demo3.jpg"  
  84.                         data-retina="http://bqworks.com/slider-pro/images/image5_large.jpg"/>  
  85.   
  86.                     <p class="sp-layer sp-white sp-padding"   
  87.                         data-vertical="10" data-horizontal="2%" data-width="96%"   
  88.                         data-show-transition="down" data-show-delay="400" data-hide-transition="up">  
  89.                         33  
  90.                     </p>  
  91.                 </div>  
  92.   
  93.                 <div class="sp-slide">  
  94.                     <img class="sp-image" src="../src/css/images/blank.gif"  
  95.                         data-src="../demo4.jpg"  
  96.                         data-retina="http://bqworks.com/slider-pro/images/image6_large.jpg"/>  
  97.   
  98.                     <p class="sp-layer sp-white sp-padding"   
  99.                         data-horizontal="10" data-vertical="10" data-width="35%">  
  100.                         44  
  101.                     </p>  
  102.                 </div>  
  103.   
  104.                 <div class="sp-slide">  
  105.                     <img class="sp-image" src="../src/css/images/blank.gif"  
  106.                         data-src="../sanya.jpg"  
  107.                         data-retina="http://bqworks.com/slider-pro/images/image7_large.jpg"/>  
  108.   
  109.                     <p class="sp-layer sp-black sp-padding"   
  110.                         data-position="bottomLeft" data-vertical="10" data-horizontal="2%" data-width="96%"   
  111.                         data-show-transition="up" data-show-delay="400" data-hide-transition="down">  
  112.                         55  
  113.                     </p>  
  114.                 </div>  
  115.   
  116.                 <div class="sp-slide">  
  117.                     <img class="sp-image" src="../src/css/images/blank.gif"  
  118.                         data-src="../xianggang.jpg"  
  119.                         data-retina="http://bqworks.com/slider-pro/images/image8_large.jpg"/>  
  120.                 </div>  
  121.   
  122.                 <div class="sp-slide">  
  123.                     <img class="sp-image" src="../src/css/images/blank.gif"  
  124.                         data-src="../demo1.jpg"  
  125.                         data-retina="http://bqworks.com/slider-pro/images/image9_large.jpg"/>  
  126.   
  127.                     <p class="sp-layer sp-black sp-padding"   
  128.                         data-position="bottomLeft" data-horizontal="50" data-vertical="100"  
  129.                         data-show-transition="down" data-show-delay="500" data-hide-transition="up">  
  130.                         6  
  131.                     </p>  
  132.   
  133.                     <p class="sp-layer sp-white sp-padding hide-small-screen"   
  134.                         data-position="bottomLeft" data-horizontal="50" data-vertical="50"  
  135.                         data-show-transition="up" data-show-delay="500" data-hide-transition="down">  
  136.                         7  
  137.                     </p>  
  138.                 </div>  
  139.   
  140.                 <div class="sp-slide">  
  141.                     <img class="sp-image" src="../src/css/images/blank.gif"  
  142.                         data-src="../demo3.jpg"  
  143.                         data-retina="http://bqworks.com/slider-pro/images/image10_large.jpg"/>  
  144.                 </div>  
  145.             </div>  
  146.   
  147.             <div class="sp-thumbnails">  
  148.                 <div class="sp-thumbnail">  
  149.                     <div class="sp-thumbnail-title">1</div>  
  150.                     <div class="sp-thumbnail-description">1</div>  
  151.                 </div>  
  152.   
  153.                 <div class="sp-thumbnail">  
  154.                     <div class="sp-thumbnail-title">2</div>  
  155.                     <div class="sp-thumbnail-description">22</div>  
  156.                 </div>  
  157.   
  158.                 <div class="sp-thumbnail">  
  159.                     <div class="sp-thumbnail-title">3</div>  
  160.                     <div class="sp-thumbnail-description">33</div>  
  161.                 </div>  
  162.   
  163.                 <div class="sp-thumbnail">  
  164.                     <div class="sp-thumbnail-title">4</div>  
  165.                     <div class="sp-thumbnail-description">44</div>  
  166.                 </div>  
  167.   
  168.                 <div class="sp-thumbnail">  
  169.                     <div class="sp-thumbnail-title">5</div>  
  170.                     <div class="sp-thumbnail-description">55</div>  
  171.                 </div>  
  172.   
  173.                 <div class="sp-thumbnail">  
  174.                     <div class="sp-thumbnail-title">6</div>  
  175.                     <div class="sp-thumbnail-description">66</div>  
  176.                 </div>  
  177.   
  178.                 <div class="sp-thumbnail">  
  179.                     <div class="sp-thumbnail-title">7</div>  
  180.                     <div class="sp-thumbnail-description">77</div>  
  181.                 </div>  
  182.   
  183.                 <div class="sp-thumbnail">  
  184.                     <div class="sp-thumbnail-title">8</div>  
  185.                     <div class="sp-thumbnail-description">88</div>  
  186.                 </div>  
  187.   
  188.                 <div class="sp-thumbnail">  
  189.                     <div class="sp-thumbnail-title">9</div>  
  190.                     <div class="sp-thumbnail-description">99</div>  
  191.                 </div>  
  192.   
  193.                 <div class="sp-thumbnail">  
  194.                     <div class="sp-thumbnail-title">10</div>  
  195.                     <div class="sp-thumbnail-description">1010</div>  
  196.                 </div>  
  197.             </div>  
  198.         </div>  

 


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