绝对炫的幻灯片插件-SKITTER

所属分类：媒体-幻灯片和轮播图,图片展示,滑块和旋转

Includes

  • code
  • source
  1. // Styles
  2. <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
  3. // Scripts
  4. <script src="js/jquery-1.5.2.min.js"></script>
  5. <script src="js/jquery.skitter.min.js"></script>
  6. <script src="js/jquery.easing.1.3.js"></script>
  7. <script src="js/jquery.animate-colors-min.js"></script>

Javascript

  • code
  • source
  1. $(function(){
  2. $('.box_skitter_large').skitter();
  3. });

HTML

  • code
  • source
  1. <div class="box_skitter box_skitter_large">
  2. <ul>
  3. <li>
  4. <a href="http://thiagosf.net"><img src="data:images/01.jpg" class="block" /></a>
  5. <div class="label_text">
  6. <p>Label</p>
  7. </div>
  8. </li>
  9. <li>
  10. <a href="http://cakephp.org"><img src="data:images/02.jpg" class="cube" /></a>
  11. <div class="label_text">
  12. <p>Label</p>
  13. </div>
  14. </li>
  15. <li>
  16. <a href="http://jquery.com"><img src="data:images/03.jpg" class="default" /></a>
  17. <div class="label_text">
  18. <p>Label</p>
  19. </div>
  20. </li>
  21. </ul>
  22. </div>

XML

  • code
  • source
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <skitter>
  3. <slide>
  4. <link>#directionTop</link>
  5. <image type="directionTop">images/001.jpg</image>
  6. <label><![CDATA[<p>directionTop</p>]]></label>
  7. </slide>
  8. <slide>
  9. <link>#cubeSize</link>
  10. <image type="cubeSize">images/002.jpg</image>
  11. <label><![CDATA[<p>cubeSize</p>]]></label>
  12. </slide>
  13. <slide>
  14. <link>#paralell</link>
  15. <image type="paralell">images/003.jpg</image>
  16. <label><![CDATA[<p>paralell</p>]]></label>
  17. </slide>
  18. </skitter>

Extend

Options

option description default example
velocity Velocity of animation 1 $('.box_skitter_large').skitter({velocity: 2});
interval Interval between transitions 2500 $('.box_skitter_large').skitter({interval: 3000});
animation Default animation null or defined in <a> class $('.box_skitter_large').skitter({animation: 'fade'});
numbers Numbers display true $('.box_skitter_large').skitter({numbers: false});
navigation Navigation display true $('.box_skitter_large').skitter({navigation: false});
label Label display true $('.box_skitter_large').skitter({label: false});
easing_default Easing default null $('.box_skitter_large').skitter({easing_default: 'easeOutBack'});
animateNumberOut Animation/style number/dot {backgroundColor:'#333', color:'#fff'} $('.box_skitter_large').skitter({animateNumberOut: {backgroundColor:'#000', color:'#ccc'}});
animateNumberOver Animation/style hover number/dot {backgroundColor:'#000', color:'#fff'} $('.box_skitter_large').skitter({animateNumberOver: {backgroundColor:'#000', color:'#ccc'}});
animateNumberActive Animation/style active number/dot {backgroundColor:'#cc3333', color:'#fff'} $('.box_skitter_large').skitter({animateNumberActive: {backgroundColor:'#000', color:'#ccc'}});
thumbs Navigation with thumbs false $('.box_skitter_large').skitter({thumbs: true});
hideTools Hide numbers and navigation false $('.box_skitter_large').skitter({hideTools: true});
fullscreen Fullscreen mode false $('.box_skitter_large').skitter({fullscreen: true});
xml Loading data from XML file false $('.box_skitter_large').skitter({xml: "xml/slides.xml"});
dots Navigation with dots false $('.box_skitter_large').skitter({dots: true});
width_label Width label null $('.box_skitter_large').skitter({width_label: '300px'});
show_randomly Randomly sliders false $('.box_skitter_large').skitter({show_randomly: true});
onLoad Callback null $('.box_skitter_large').skitter({onLoad: function() { console.log('start!') } });
numbers_align Alignment of numbers/dots/thumbs left $('.box_skitter_large').skitter({numbers_align: 'center'});
preview Preview with dots false $('.box_skitter_large').skitter({dots: true, preview: true});
focus Focus slideshow false $('.box_skitter_large').skitter({focus: true});
focus_position Position of button focus slideshow center $('.box_skitter_large').skitter({focus_position: 'leftTop'});
controls Option play/pause manually false $('.box_skitter_large').skitter({controls: true});
controls_position Position of button controls center

$('.box_skitter_large').skitter({controls_position: 'rightBottom'});

使用步骤

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="data:images/001.jpg" class="cube" /></a>

          <div class="label_text">

            <p>cube</p>

          </div>

        </li>

        <li><a href="#cubeRandom"><img src="data:images/002.jpg" class="cubeRandom" /></a>

          <div class="label_text">

            <p>cubeRandom</p>

          </div>

        </li>

        <li><a href="#block"><img src="data:images/003.jpg" class="block" /></a>

          <div class="label_text">

            <p>block</p>

          </div>

        </li>

        <li><a href="#cubeStop"><img src="data:images/004.jpg" class="cubeStop" /></a>

          <div class="label_text">

            <p>cubeStop</p>

          </div>

        </li>

        <li><a href="#cubeHide"><img src="data:images/005.jpg" class="cubeHide" /></a>

          <div class="label_text">

            <p>cubeHide</p>

          </div>

        </li>

        <li><a href="#cubeSize"><img src="data:images/006.jpg" class="cubeSize" /></a>

          <div class="label_text">

            <p>cubeSize</p>

          </div>

        </li>

        <li><a href="#horizontal"><img src="data:images/007.jpg" class="horizontal" /></a>

          <div class="label_text">

            <p>horizontal</p>

          </div>

        </li>

        <li><a href="#showBars"><img src="data:images/008.jpg" class="showBars" /></a>

          <div class="label_text">

            <p>showBars</p>

          </div>

        </li>

        <li><a href="#showBarsRandom"><img src="data:images/009.jpg" class="showBarsRandom" /></a>

          <div class="label_text">

            <p>showBarsRandom</p>

          </div>

        </li>

        <li><a href="#tube"><img src="data:images/010.jpg" class="tube" /></a>

          <div class="label_text">

            <p>tube</p>

          </div>

        </li>

        <li><a href="#fade"><img src="data:images/011.jpg" class="fade" /></a>

          <div class="label_text">

            <p>fade</p>

          </div>

        </li>

        <li><a href="#fadeFour"><img src="data:images/012.jpg" class="fadeFour" /></a>

          <div class="label_text">

            <p>fadeFour</p>

          </div>

        </li>

        <li><a href="#paralell"><img src="data:images/013.jpg" class="paralell" /></a>

          <div class="label_text">

            <p>paralell</p>

          </div>

        </li>

        <li><a href="#blind"><img src="data:images/014.jpg" class="blind" /></a>

          <div class="label_text">

            <p>blind</p>

          </div>

        </li>

        <li><a href="#blindHeight"><img src="data:images/015.jpg" class="blindHeight" /></a>

          <div class="label_text">

            <p>blindHeight</p>

          </div>

        </li>

        <li><a href="#blindWidth"><img src="data:images/016.jpg" class="blindWidth" /></a>

          <div class="label_text">

            <p>blindWidth</p>

          </div>

        </li>

        <li><a href="#directionTop"><img src="data:images/017.jpg" class="directionTop" /></a>

          <div class="label_text">

            <p>directionTop</p>

          </div>

        </li>

        <li><a href="#directionBottom"><img src="data:images/018.jpg" class="directionBottom" /></a>

          <div class="label_text">

            <p>directionBottom</p>

          </div>

        </li>

        <li><a href="#directionRight"><img src="data:images/019.jpg" class="directionRight" /></a>

          <div class="label_text">

            <p>directionRight</p>

          </div>

        </li>

        <li><a href="#directionLeft"><img src="data:images/020.jpg" class="directionLeft" /></a>

          <div class="label_text">

            <p>directionLeft</p>

          </div>

        </li>

        <li><a href="#cubeStopRandom"><img src="data:images/021.jpg" class="cubeStopRandom" /></a>

          <div class="label_text">

            <p>cubeStopRandom</p>

          </div>

        </li>

        <li><a href="#cubeSpread"><img src="data: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或false true
controls 是否显示 play/pause选项 true或false false
controls_position 按钮控件的位置 center, leftTop, rightTop, leftBottom, rightBottom center
dots 导航用点 true或false false
easing_default 默认缓动 null或缓动字符串 null
enable_navigation_keys 是否启用导航键 true或false false
focus: true 焦点幻灯片 true或false false
focus_position 焦点幻灯片按钮的位置 center, leftTop, rightTop, leftBottom, rightBottom center
fullscreen 是否设置成全屏模式 true或false false
hideTools 是否隐藏数字按钮和导航 true或false false
interval 幻灯片切换间隔时间 数字 2500
label 是否显示标签 true或false true
mouseOutButton 鼠标移出导航按钮的回调函数 函数 function() { $(this).stop().animate({opacity:0.5}, 200); }
mouseOverButton 鼠标移到导航按钮上时的回调函数 函数 function() { $(this).stop().animate({opacity:0.5}, 200); }
navigation 是否显示导航按钮 true或false true
numbers 是否显示数字按钮 true或false true
numbers_align 按钮数字的对齐方式 center, left, right left
onLoad 加载幻灯片调用的函数 函数 null
preview 是否显示预览图 true或false false
show_randomly 是否随机切换样式 true或false true
stop_over 当鼠标移动到幻灯片上时是否暂停切换 true或false true
thumbs Navigation with thumbs true或false false
velocity 动画速度 0-2（float） 1
width_label label的宽度 宽度字符串（’300px’） null
with_animations 特定的动画效果集合 类似于['paralell', 'glassCube','swapBars']的格式 []
xml 从制定的xml中加载数据 xml文件路径或true, false false

切换效果

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

绝对炫的幻灯片插件-SKITTER的更多相关文章

  1. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  2. Prezento – 轻量、简单的 jQuery 幻灯片插件

    Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...

  3. jQuery幻灯片插件autoPic

    原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!

  4. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  5. 幻灯片插件FlexSlider -- Amaze UI幻灯片参数

    用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...

  6. ResponsiveSlides.js最轻量级的幻灯片插件

    摘要:ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支 ...

  7. JQuery之滑动幻灯片插件Easy Slider初体验

    Easy Slider 是一个滑动幻灯片插件,支持任何图片或内容,可以实现横向或纵向滑动.它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制.基本上只需要引入这个插件后,设置好内容,然后样式化C ...

  8. jq 幻灯片插件制作

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. Jquery Slick幻灯片插件

    slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 ...

随机推荐

  1. [AHOI2015 Junior] [Vijos P1943] 上学路上 【容斥+组合数】

    题目链接:Vijos - P1943 题目分析 这是 AHOI 普及组的题目,然而我并不会做= =弱到不行= = 首先,从 (x, 0) 到 (0, y) 的最短路,一定是只能向左走和向上走,那么用组 ...

  2. JVM相关参数配置和问题诊断<转>

    原文连接:http://blog.csdn.net/chjttony/article/details/6240457 1.Websphere JVM相关问题诊断: 由JVM引起的Websphere问题 ...

  3. Delphi常用排序

    1.冒泡排序 Delphi/Pascal code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 procedure BubbleSort(var x:a ...

  4. Android 小闹钟程序

    最近写了个闹钟的程序,看到SharedPreferences在一个程序中可以共享数据,SharedPreferences是一个轻量级的键值存储机制,只可以存储基本数据类型.我就拿来用用,没想到Shar ...

  5. c++重载、覆盖和隐藏

    看以前的:http://www.cnblogs.com/youxin/p/3305688.html 答案:a.成员函数被重载的特征:overload(1)相同的范围(在同一个类中):(2)函数名字相同 ...

  6. ServiceStack.Redis 之 IRedisTypedClient

    IRedisTypedClient IRedisTypedClient类相当于IRedicClient的强类型版,其方法与属性大多数与IRedisClient类似. 它支持在Redis中使用Linq查 ...

  7. 网络流（最大流）：CodeForces 499E Array and Operations

    You have written on a piece of paper an array of n positive integers a[1], a[2], ..., a[n] and m goo ...

  8. 判断iis是否已经安装

    判断iis是否已经安装? 访问http://127.0.0.1 能得到正确页面的是已经安装. 活者查看控制面板-添加删除程序-windows组件-internet信息服务(IIS)前面的没有打勾则没有 ...

  9. unity3d Human skin real time rendering with blood and water drop effect真实模拟人皮实时渲染之血液和水珠掉落效果

    在之前的一篇(链接在此)文章中写了下关于真实模拟皮肤渲染,在此基础之上又想加上血液效果,在洗澡的时候(=  =:)又想在skin上加上水珠的效果,所以研究了下,做出来效果感觉还不错,放下效果图: 水珠 ...

  10. HDOJ(HDU) 2519 新生晚会(组合公式)

    Problem Description 开学了,杭电又迎来了好多新生.ACMer想为新生准备一个节目.来报名要表演节目的人很多,多达N个,但是只需要从这N个人中选M个就够了,一共有多少种选择方法? I ...