首页>>焦点图>>PlusSlider 2个焦点图，一个可以固定图片宽和高一个显示实际大小(2013-12-06)

PlusSlider 2个焦点图，一个可以固定图片宽和高一个显示实际大小

PlusSlider 2个焦点图，一个可以固定图片宽和高一个显示实际大小
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="slider">  
  2.                               
  3.                 <div data-title="PlusSlider" class="slide1">  
  4.                     <div>  
  5.                         <h2>PlusSlider</h2>  
  6.                         <p>  
  7.                             A content slider that simply works...<br />  
  8.                             The right way  
  9.                         </p>  
  10.                     </div>  
  11.                 </div>  
  12.   
  13.                 <a data-title="Tree" href="#"><img src="images/tree.jpg" alt="" height="250" width="351" /></a>  
  14.                   
  15.                 <img data-title="Sunset" src="images/clouds.jpg" alt="" height="134" width="630" />  
  16.                   
  17.                 <img data-title="Stop Sign" src="images/image4.jpg" alt="" height="250" width="630" />  
  18.                   
  19.             </div>  
  20.             <br /><br />  
  21.             <div id="slider2">  
  22.               
  23.                   
  24.                 <a href="#"><img src="images/image2.jpg" alt="" height="250" width="630" /></a>  
  25.                   
  26.                 <img src="images/image3.jpg" alt="" height="250" width="630" />  
  27.                   
  28.                   
  29.                 <img src="images/image4.jpg" alt="" height="250" width="630" />  
  30.                   
  31.             </div>  
  32.   
  33.               
  34.         </div>  
  35.     </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     $(document).ready(function(){  
  3.   
  4.         $('#slider').plusSlider({  
  5.             autoPlay: false,  
  6.             sliderEasing: 'easeInOutExpo', // Anything other than 'linear' and 'swing' requires the easing plugin  
  7.             paginationPosition: 'append',  
  8.             sliderType: 'slider' // Choose whether the carousel is a 'slider' or a 'fader'  
  9.         });  
  10.   
  11.         $('#slider2').plusSlider({  
  12.             autoPlay: false,  
  13.             displayTime: 2000, // The amount of time the slide waits before automatically moving on to the next one. This requires 'autoPlay: true'  
  14.             sliderType: 'fader', // Choose whether the carousel is a 'slider' or a 'fader'  
  15.             width: 500, // Overide the default CSS width  
  16.             height: 250 // Overide the default CSS width  
  17.         });  
  18.   
  19.         $('#slider3').plusSlider({  
  20.             sliderEasing: 'easeInOutExpo', // Anything other than 'linear' and 'swing' requires the easing plugin  
  21.             fullWidth: true,  
  22.             autoPlay: false,   
  23.             sliderType: 'slider' // Choose whether the carousel is a 'slider' or a 'fader'  
  24.         });  
  25.   
  26.     });  
  27.     </script>  

 


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