首页>>焦点图>>jquery带缩略图可触摸焦点图(2024-06-19)

jquery带缩略图可触摸焦点图

jquery带缩略图可触摸焦点图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

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="css/images/blank.gif" data-src="images/image1_medium.jpg" data-retina="images/image1_large.jpg"/>                  
  5.                 <p class="sp-layer sp-white sp-padding" data-horizontal="50" data-vertical="50" data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">  
  6.                       
  7.                 </p>  
  8.   
  9.                 <p class="sp-layer sp-black sp-padding hide-small-screen" data-horizontal="180" data-vertical="50" data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">  
  10.                     www.freejs.net  
  11.                 </p>  
  12.             </div>  
  13.   
  14.             <div class="sp-slide">  
  15.                 <img class="sp-image" src="css/images/blank.gif" data-src="images/image2_medium.jpg" data-retina="images/image2_large.jpg"/>  
  16.                 <h3 class="sp-layer sp-black sp-padding" data-horizontal="40" data-vertical="10%" data-show-transition="left" data-hide-transition="left">www.freejs.net</h3>  
  17.                 <p class="sp-layer sp-black sp-padding hide-small-screen" data-horizontal="40" data-vertical="34%" data-width="350" data-show-transition="left" data-show-delay="400" data-hide-transition="left" data-hide-delay="500">www.freejs.net</p>  
  18.             </div>  
  19.   
  20.             <div class="sp-slide">  
  21.                 <img class="sp-image" src="css/images/blank.gif" data-src="images/image1_medium.jpg" data-retina="images/image1_large.jpg"/>  
  22.                 <p class="sp-layer sp-white sp-padding" data-position="centerCenter" data-vertical="-50" data-show-transition="right" data-hide-transition="left" data-show-delay="500" >www.freejs.net</p>  
  23.                 <p class="sp-layer sp-black sp-padding hide-small-screen" data-position="centerCenter" data-vertical="50" data-show-transition="left" data-show-delay="700" data-hide-transition="right" data-hide-delay="200">  
  24.                     www.freejs.net  
  25.                 </p>  
  26.             </div>  
  27.   
  28.             <div class="sp-slide">  
  29.                 <img class="sp-image" src="css/images/blank.gif" data-src="images/image2_medium.jpg" data-retina="images/image2_large.jpg"/>  
  30.                 <p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-show-transition="up" data-hide-transition="down">  
  31.                     <span class="hide-small-screen">www.freejs.net</span>  
  32.                     <span class="hide-medium-screen">www.freejs.net</span>  
  33.                 </p>  
  34.             </div>  
  35.   
  36.             <div class="sp-slide">  
  37.                 <img class="sp-image" src="css/images/blank.gif" data-src="images/image1_medium.jpg" data-retina="images/image1_large.jpg"/>  
  38.                 <p class="sp-layer sp-white sp-padding" data-vertical="10" data-horizontal="2%" data-width="96%" data-show-transition="down" data-show-delay="400" data-hide-transition="up">  
  39.                     <span class="hide-small-screen">www.freejs.net</span>  
  40.                     <span class="hide-medium-screen">www.freejs.net</span>  
  41.                 </p>  
  42.             </div>  
  43.         </div>  
  44.   
  45.         <div class="sp-thumbnails">  
  46.             <div class="sp-thumbnail">  
  47.                 <div class="sp-thumbnail-title">www.freejs.net免费素材网</div>  
  48.                 <div class="sp-thumbnail-description">www.freejs.net</div>  
  49.             </div>  
  50.   
  51.             <div class="sp-thumbnail">  
  52.                 <div class="sp-thumbnail-title">www.freejs.net免费素材网</div>  
  53.                 <div class="sp-thumbnail-description">www.freejs.net</div>  
  54.             </div>  
  55.   
  56.             <div class="sp-thumbnail">  
  57.                 <div class="sp-thumbnail-title">www.freejs.net免费素材网</div>  
  58.                 <div class="sp-thumbnail-description">www.freejs.net</div>  
  59.             </div>  
  60.   
  61.             <div class="sp-thumbnail">  
  62.                 <div class="sp-thumbnail-title">www.freejs.net免费素材网</div>  
  63.                 <div class="sp-thumbnail-description">www.freejs.net</div>  
  64.             </div>  
  65.   
  66.             <div class="sp-thumbnail">  
  67.                 <div class="sp-thumbnail-title">www.freejs.net免费素材网</div>  
  68.                 <div class="sp-thumbnail-description">www.freejs.net</div>  
  69.             </div>  
  70.         </div>  
  71.     </div>  

 


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