当前位置:主页 > jquery插件 > 轮播图 >

绝对炫的幻灯片插件-SKITTER

栏目分类:轮播图   模板编号:JQ00002    发布日期:2017-01-13   来源:网络   浏览次数:次     在线预览
插件描述:Skitter绝对算得上是一款漂亮的Jquery幻灯片插件,第一眼就被他的切换效果所吸引。

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


在线演示 立即下载
打赏本站
云盘密码:08ac
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载