欢迎光临一流素材网,免积分免费素材下载!
AD

绝对炫的幻灯片插件-SKITTER

所属栏目:轮播图/幻灯片更新时间:2016-10-17原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

兼容:Firefox,Chrome,Safari,IE10+,IE9,IE8,IE6

Skitter绝对算得上是一款漂亮的Jquery幻灯片插件,第一眼就被他的切换效果所吸引。

使用步骤

1、引入JS和css文件

<link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" /> 
<script src="js/jquery-1.6.3.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> 
<script src="js/jquery.animate-colors-min.js"></script> <script src="js/jquery.skitter.min.js"></script>

2、添加初始化JS

$('.box_skitter_large').skitter({});

3、html代码的格式为

<div id="content" style="margin:0;padding:0">   
<div class="border_box" style="margin:0;padding:0">     
<div class="box_skitter box_skitter_large" style="margin:0;padding:0">       
<ul>         
<li><a href="#cube"><img src="images/001.jpg" class="cube" /></a>           
<div class="label_text">             
<p>cube</p>          
 </div>         
 </li>         
 <li><a href="#cubeRandom"><img src="images/002.jpg" class="cubeRandom" /></a>           
 <div class="label_text">             
 <p>cubeRandom</p>           
 </div>         
 </li>         
 <li><a href="#block"><img src="images/003.jpg" class="block" /></a>           
 <div class="label_text">             
 <p>block</p>          
 </div>        
  </li>        
   <li><a href="#cubeStop"><img src="images/004.jpg" class="cubeStop" /></a>         
     <div class="label_text">            
      <p>cubeStop</p>         
        </div>        
  </li>        
          <li><a href="#cubeHide"><img src="images/005.jpg" class="cubeHide" /></a>          
           <div class="label_text">            
            <p>cubeHide</p>          
             </div>        
              </li>        
               <li><a href="#cubeSize"><img src="images/006.jpg" class="cubeSize" /></a>           
               <div class="label_text">             
               <p>cubeSize</p>          
                </div>        
                </li>        
                 <li><a href="#horizontal"><img src="images/007.jpg" class="horizontal" /></a>          
                  <div class="label_text">            
                   <p>horizontal</p>           
                   </div>        
                    </li>       
                      <li><a href="#showBars"><img src="images/008.jpg" class="showBars" /></a>          
                       <div class="label_text">             
                       <p>showBars</p>           
                       </div>        
                        </li>         
                        <li><a href="#showBarsRandom"><img src="images/009.jpg" class="showBarsRandom" /></a>           
                        <div class="label_text">             
                        <p>showBarsRandom</p>          
                         </div>        
                          </li>         
                          <li><a href="#tube"><img src="images/010.jpg" class="tube" /></a>           
                          <div class="label_text">             
                          <p>tube</p>          
                           </div>         
                           </li>         
                           <li><a href="#fade"><img src="images/011.jpg" class="fade" /></a>          
                            <div class="label_text">            
                             <p>fade</p>          
                              </div>         
                              </li>         
                              <li><a href="#fadeFour"><img src="images/012.jpg" class="fadeFour" /></a>          
                               <div class="label_text">            
                                <p>fadeFour</p>           
                                </div>         
                                </li>        
                                 <li><a href="#paralell"><img src="images/013.jpg" class="paralell" /></a>          
                                  <div class="label_text">             
                                  <p>paralell</p>           
                                  </div>         
                                  </li>        
                                   <li><a href="#blind"><img src="images/014.jpg" class="blind" /></a>           
                                   <div class="label_text">            
                                    <p>blind</p>           
                                    </div>         
                                    </li>         
                                    <li><a href="#blindHeight"><img src="images/015.jpg" class="blindHeight" /></a>          
                                     <div class="label_text">            
                                      <p>blindHeight</p>          
                                       </div>        
                                        </li>        
                                         <li><a href="#blindWidth"><img src="images/016.jpg" class="blindWidth" /></a>          
                                          <div class="label_text">            
                                           <p>blindWidth</p>           
                                           </div>        
                                            </li>         
                                            <li><a href="#directionTop"><img src="images/017.jpg" class="directionTop" /></a>           
                                            <div class="label_text">            
                                             <p>directionTop</p>          
                                              </div>        
                                               </li>        
                                                <li><a href="#directionBottom"><img src="images/018.jpg" class="directionBottom" /></a>           
                                                <div class="label_text">             
                                                <p>directionBottom</p>          
                                                 </div>        
                                                  </li>         
                                                  <li><a href="#directionRight"><img src="images/019.jpg" class="directionRight" /></a>         
                                                    <div class="label_text">             
                                                    <p>directionRight</p>           
                                                    </div>        
                                                     </li>        
                                                     <li><a href="#directionLeft"><img src="images/020.jpg" class="directionLeft" /></a>          
                                                      <div class="label_text">            
                                                       <p>directionLeft</p>          
                                                        </div>        
                                                         </li>         
                                                         <li><a href="#cubeStopRandom"><img src="images/021.jpg" class="cubeStopRandom" /></a>          
                                                          <div class="label_text">             
                                                          <p>cubeStopRandom</p>           
                                                          </div>        
                                                           </li>         
                                                           <li><a href="#cubeSpread"><img src="images/022.jpg" class="cubeSpread" /></a>           
                                                           <div class="label_text">            
                                                            <p>cubeSpread</p>           
                                                            </div>        
                                                             </li>      
                                                              </ul>    
                                                               </div>   
                                                               </div> 
                                                               </div>

参数配置

参数名参数说明可选值默认值
animateNumberActive数字按钮激活的样式字符串键值对{backgroundColor:’#cc3333′, color:’#fff’}
animateNumberOut鼠标移出时按钮样式字符串键值对{backgroundColor:’#333′, color:’#fff’}
animateNumberOver鼠标移到按钮上时的样式字符串键值对{backgroundColor:’#000′, color:’#fff’}
animation字符串所有的动画请参见下面切换效果null
auto_play是否自动播放幻灯片true或falsetrue
controls是否显示 play/pause选项true或falsefalse
controls_position按钮控件的位置center, leftTop, rightTop, leftBottom, rightBottomcenter
dots导航用点true或falsefalse
easing_default默认缓动null或缓动字符串null
enable_navigation_keys是否启用导航键true或falsefalse
focus: true焦点幻灯片true或falsefalse
focus_position焦点幻灯片按钮的位置center, leftTop, rightTop, leftBottom, rightBottomcenter
fullscreen是否设置成全屏模式true或falsefalse
hideTools是否隐藏数字按钮和导航true或falsefalse
interval幻灯片切换间隔时间数字2500
label是否显示标签true或falsetrue
mouseOutButton鼠标移出导航按钮的回调函数函数function() { $(this).stop().animate({opacity:0.5}, 200); }
mouseOverButton鼠标移到导航按钮上时的回调函数函数function() { $(this).stop().animate({opacity:0.5}, 200); }
navigation是否显示导航按钮true或falsetrue
numbers是否显示数字按钮true或falsetrue
numbers_align按钮数字的对齐方式center, left, rightleft
onLoad加载幻灯片调用的函数函数null
preview是否显示预览图true或falsefalse
show_randomly是否随机切换样式true或falsetrue
stop_over当鼠标移动到幻灯片上时是否暂停切换true或falsetrue
thumbsNavigation with thumbstrue或falsefalse
velocity动画速度0-2(float)1
width_labellabel的宽度宽度字符串(’300px’)null
with_animations特定的动画效果集合类似于['paralell', 'glassCube','swapBars']的格式[]
xml从制定的xml中加载数据xml文件路径或true, falsefalse


切换效果

cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, random, randomSmart


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1jQuery响应式触屏图片左右滚动代码owl.carousel

2轻量级响应式jQuery轮播图/幻灯片插件-lightslider

3移动端滑动JS响应式轮播图插件

4jQuery倾斜图片切换滚动焦点图幻灯片代码

5jQuery版仿淘宝商城天猫首页多格焦点图效果

6易迅网竖排多格jquery焦点图代码

7jQ索引按钮+缩略图双重切换

8兼容触屏手机浏览的JS全屏焦点图代码

9鼠标滑过+自动播放jQ全屏焦点图代码

10Diapo轮播图-幻灯片插件