jQuery幻灯片插件Skippr

最新推荐文章于 2025-06-02 09:42:14 发布

转载最新推荐文章于 2025-06-02 09:42:14 发布 · 889 阅读

JQuery 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用Skippr库快速创建带有左右箭头、索引按钮和滑动切换效果的幻灯片。包括引入所需库、创建HTML结构、设置CSS样式以及配置JavaScript方法以实现自定义功能。

Skippr是一款带左右箭头,索引按钮,滑动切换效果并且轻量、快速的幻灯片

设置

引入jquery.skippr.css、jquery.js、jquery.skippr.js 注意jQuery必须在jquery.skippr.js之前

[html]view plaincopy 
   
 <head>  
     <link href="css/jquery.skippr.css" rel="stylesheet" type="text/css" >  
     <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>  
     <script src="js/jquery.skippr.js" type="text/javascript"></script>  
 </head>  

创建DIV元素,div标签内添加background-images样式

[html]view plaincopy 
   
 <div id="container">  
      <div id="myskipper">  
       <div style="background-image: url(css/img/test1.jpg)"></div>  
       <div style="background-image: url(css/img/test2.jpg)"></div>  
       <div style="background-image: url(css/img/test3.jpg)"></div>  
      </div>      
 </div>  

启动

选择目标元素调用skipper方法

[javascript]view plaincopy 
   
 $(document).ready(function(){  
      $("#myskipper").skippr();  
 });   

选项

[javascript]view plaincopy 
   
 $(document).ready(function(){  
     $("#myskipper").skippr({  
      transition: 'slide',  
          speed: 1000,  
          navType: 'block',  
          arrows: true,  
          autoPlay: false,  
          autoPlayDuration: 5000,  
          keyboardOnAlways: true,  
          hidePrevious: false  
     });  
 });   