zoukankan      html  css  js  c++  java

  • 绝对炫的幻灯片插件-SKITTER

    绝对炫的幻灯片插件-SKITTER

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

    绝对炫的幻灯片插件-SKITTER

    Includes

    • code
    • source
    2. // Styles
    4. <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
    8. // Scripts
    10. <script src="js/jquery-1.5.2.min.js"></script>
    12. <script src="js/jquery.skitter.min.js"></script>
    14. <script src="js/jquery.easing.1.3.js"></script>
    16. <script src="js/jquery.animate-colors-min.js"></script>

    Javascript

    • code
    • source
    2. $(function(){
    4. $('.box_skitter_large').skitter();
    6. });

    HTML

    • code
    • source
    2. <div class="box_skitter box_skitter_large">
    6. <ul>
    8. <li>
    10. <a href="http://thiagosf.net"><img src="images/01.jpg" class="block" /></a>
    14. <div class="label_text">
    16. <p>Label</p>
    18. </div>
    20. </li>
    22. <li>
    26. <a href="http://cakephp.org"><img src="images/02.jpg" class="cube" /></a>
    28. <div class="label_text">
    30. <p>Label</p>
    34. </div>
    36. </li>
    38. <li>
    40. <a href="http://jquery.com"><img src="images/03.jpg" class="default" /></a>
    44. <div class="label_text">
    46. <p>Label</p>
    48. </div>
    50. </li>
    52. </ul>
    56. </div>

    XML

    • code
    • source
    2. <?xml version="1.0" encoding="utf-8"?>
    4. <skitter>
    8. <slide>
    10. <link>#directionTop</link>
    12. <image type="directionTop">images/001.jpg</image>
    14. <label><![CDATA[<p>directionTop</p>]]></label>
    18. </slide>
    20. <slide>
    22. <link>#cubeSize</link>
    24. <image type="cubeSize">images/002.jpg</image>
    28. <label><![CDATA[<p>cubeSize</p>]]></label>
    30. </slide>
    32. <slide>
    34. <link>#paralell</link>
    38. <image type="paralell">images/003.jpg</image>
    40. <label><![CDATA[<p>paralell</p>]]></label>
    42. </slide>
    46. </skitter>

    Extend

    Options

    optiondescriptiondefaultexample
    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="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或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
  • 相关阅读:
    设置IME控制输入框只能输入英文
    URLStream
    EBS前台界面值找后台对应的字段方法
    EBS调试
    Oracle EBS 如何定义请求
    EBS FORM（10g）开发步骤
    BOM模块常用表结构
    小示例分清表接关系
    UOM物料单位转换（同类型才能转换）
    ORECLE EBS 如何调试
  • 原文地址：https://www.cnblogs.com/xingfuboke/p/4920638.html
Copyright © 2011-2022 走看看