以下是 SuperSlide2.1滑动门jQuery插件 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta property="wb:webmaster" content="125d4c886033b1d0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title>SuperSlide2.1滑动门jQuery插件</title>
<script type="text/javascript" src="jquery1.42.min.js"></script>
<link href="default.css" rel="stylesheet" type="text/css">
</head>
<body>
<style type="text/css">
#content{ padding:32px 0 30px 0; }
</style>
<!-- header S -->
<div id="header" name="header">
<div class="headerBg"></div>
<span class="nav">
<a href="index.html">首页</a>|<a href="param.html">查看参数</a>|<a href="demo.html">基础效果</a>|<a href="otherDemo.html">扩展效果</a>
</span>
<div class="title">
<h1 tite="SuperSlide" id="logo">SuperSlide</h1><em>v2.1</em><span class="author"> -- 大话主席</span>
</div>
</div>
<!-- header E -->
<!-- content S -->
<div id="content" name="content">
<!-- 1 switchTab S -->
<div id="switchTab" class="demoBox">
<div name="effect1" id="effect1" class="hd"><h3><span>1. </span>标签切换 / 书签切换 / 默认效果</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/1.0-switchTab-iframe.html?" frameborder="0"></iframe>
<p class="botTit"><em>1.0-标签切换</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="fade">fade</option>
<option value="fold">fold</option>
<option value="left">left</option>
<option value="top">top</option>
<option value="leftLoop">leftLoop</option>
<option value="topLoop">topLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing">
<option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
</tr>
<tr>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".slideTxtBox").slide({<i></i>});</span></p>
<p class="notice">注意：缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”，会有最佳效果。<br/></p>
</div>
</div><!-- bd E -->
</div>
<!-- 1 switchTab E -->
<!-- 2 focusNews S -->
<div id="focusNews" class="demoBox ">
<div name="effect2" id="effect2" class="hd"><h3><span>2. </span>焦点图 / 幻灯片</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/2.0-focus-iframe.html?&fade&true" frameborder="0"></iframe>
<p class="botTit"><em>2.0-焦点图/幻灯片</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="fade">fade</option>
<option value="fold">fold</option>
<option value="left">left</option>
<option value="top">top</option>
<option value="leftLoop">leftLoop</option>
<option value="topLoop">topLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option selected="selected" value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing">
<option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
</tr>
<tr>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".slideBox").slide({mainCell:".bd ul"<i></i>});</span></p>
<p class="notice">注意：缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”，会有最佳效果。<br/></p>
</div>
</div><!-- bd E -->
</div>
<!-- 2 focusNews E -->
<!-- 3 picScroll-left S -->
<div id="picScroll-left" class="demoBox ">
<div name="effect3" id="effect3" class="hd"><h3><span>3. </span>图片滚动-左</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/3.0-picScroll-left-iframe.html?&left&true&1&3" frameborder="0"></iframe>
<p class="botTit"><em>3.0-图片滚动-左</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="left" class="show">left</option>
<option value="leftLoop">leftLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option selected="selected" value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">滚动个数<i>[scroll]</i>:</td>
<td>
<select name="scroll">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
</select>
</td>
</tr>
<tr>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing">
<option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
<p class="notice">注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。<br/>
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
</p>
</div>
</div><!-- bd E -->
</div>
<!-- 3 picScroll-left E -->
<!-- 4 picScroll-top S -->
<div id="picScroll-top" class="demoBox ">
<div name="effect4" id="effect4" class="hd"><h3><span>4. </span>图片滚动-上</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/4.0-picScroll-top-iframe.html?&top&true&1&3" frameborder="0"></iframe>
<p class="botTit"><em>4.0-图片滚动-上</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="top" class="show">top</option>
<option value="topLoop">topLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option selected="selected" value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">滚动个数<i>[scroll]</i>:</td>
<td>
<select name="scroll">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
</select>
</td>
</tr>
<tr>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing">
<option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".picScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
<p class="notice">注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。<br/>
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
</p>
</div>
</div><!-- bd E -->
</div>
<!-- 4 picScroll-top E -->
<!-- 5 picMarquee-left S -->
<div id="picMarquee-left" class="demoBox ">
<div name="effect5" id="effect5" class="hd"><h3><span>5. </span>图片无缝滚动-左</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/5.0-picMarquee-left-iframe.html?&leftMarquee&3&50&false&true&click" frameborder="0"></iframe>
<p class="botTit"><em>5.0-图片无缝滚动-左</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="leftMarquee" class="show">leftMarquee</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
</select>
</td>
</tr>
<tr>
<td class="n">运行速度<i>[interTime]</i>:</td>
<td>
<select name="interTime">
<option value="50" class="show">50</option>
<option value="25">25</option>
<option value="10">10</option>
</select>
</td>
<td class="n">默认反方向运动<i>[opp]</i>:</td>
<td>
<select name="opp">
<option value="false">false</option>
<option value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n new" title="v2.1 新增：长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click" selected="selected">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
</div>
</div><!-- bd E -->
</div>
<!-- 5 picMarquee-left E -->
<!-- 6 picMarquee-top S -->
<div id="picMarquee-top" class="demoBox ">
<div name="effect6" id="effect6" class="hd"><h3><span>6. </span>图片无缝滚动-上</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/6.0-picMarquee-top-iframe.html?&topMarquee&3&50&false&true&click" frameborder="0"></iframe>
<p class="botTit"><em>6.0-图片无缝滚动-上</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="topMarquee" class="show">topMarquee</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
</select>
</td>
</tr>
<tr>
<td class="n">运行速度<i>[interTime]</i>:</td>
<td>
<select name="interTime">
<option value="50" class="show">50</option>
<option value="25">25</option>
<option value="10">10</option>
</select>
</td>
<td class="n">默认反方向运动<i>[opp]</i>:</td>
<td>
<select name="opp">
<option value="false">false</option>
<option value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n new" title="v2.1 新增：长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click" selected="selected">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
</div>
</div><!-- bd E -->
</div>
<!-- 6 picMarquee-top E -->
<!-- 7 txtScroll-left S -->
<div id="txtScroll-left" class="demoBox ">
<div name="effect7" id="effect7" class="hd"><h3><span>7. </span>文字滚动-左</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/7.0-txtScroll-left-iframe.html?&left&true&2&2" frameborder="0"></iframe>
<p class="botTit"><em>7.0-文字滚动-左</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="left" class="show">left</option>
<option value="leftLoop">leftLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option selected="selected" value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">滚动个数<i>[scroll]</i>:</td>
<td>
<select name="scroll">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</td>
</tr>
<tr>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing">
<option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".txtScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
<p class="notice">注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。<br/>
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
</p>
</div>
</div><!-- bd E -->
</div>
<!-- 7 txtScroll-left E -->
<!-- 8 txtScroll-top S -->
<div id="txtScroll-top" class="demoBox ">
<div name="effect8" id="effect8" class="hd"><h3><span>8. </span>文字滚动-上</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/8.0-txtScroll-top-iframe.html?&top&true&1&5" frameborder="0"></iframe>
<p class="botTit"><em>8.0-文字滚动-上</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="top" class="show">top</option>
<option value="topLoop">topLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option selected="selected" value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">滚动个数<i>[scroll]</i>:</td>
<td>
<select name="scroll">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected="selected">5</option>
</select>
</td>
</tr>
<tr>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing">
<option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
<p class="notice">注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。<br/>
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
</p>
</div>
</div><!-- bd E -->
</div>
<!-- 8 txtScroll-top E -->
<!-- 9 txtMarquee-left S -->
<div id="txtMarquee-left" class="demoBox ">
<div name="effect9" id="effect9" class="hd"><h3><span>9. </span>文字无缝滚动-左</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/9.0-txtMarquee-left-iframe.html?&leftMarquee&3&50&false&true&click" frameborder="0"></iframe>
<p class="botTit"><em>9.0-文字无缝滚动-左</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="leftMarquee" class="show">leftMarquee</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="2" selected="selected">2</option>
</select>
</td>
</tr>
<tr>
<td class="n">运行速度<i>[interTime]</i>:</td>
<td>
<select name="interTime">
<option value="50" class="show">50</option>
<option value="25">25</option>
<option value="10">10</option>
</select>
</td>
<td class="n">默认反方向运动<i>[opp]</i>:</td>
<td>
<select name="opp">
<option value="false">false</option>
<option value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n new" title="v2.1 新增：长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click" selected="selected">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".txtMarquee-left").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
</div>
</div><!-- bd E -->
</div>
<!-- 9 txtMarquee-left E -->
<!-- 10 txtMarquee-top S -->
<div id="txtMarquee-top" class="demoBox ">
<div name="effect10" id="effect10" class="hd"><h3><span>10. </span>文字无缝滚动-上</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/10.0-txtMarquee-top-iframe.html?&topMarquee&5&50&false&true&click" frameborder="0"></iframe>
<p class="botTit"><em>10.0-文字无缝滚动-上</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="topMarquee" class="show">topMarquee</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected="selected">5</option>
</select>
</td>
</tr>
<tr>
<td class="n">运行速度<i>[interTime]</i>:</td>
<td>
<select name="interTime">
<option value="50" class="show">50</option>
<option value="25">25</option>
<option value="10">10</option>
</select>
</td>
<td class="n">默认反方向运动<i>[opp]</i>:</td>
<td>
<select name="opp">
<option value="false">false</option>
<option value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n new" title="v2.1 新增：长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click" selected="selected">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
</div>
</div><!-- bd E -->
</div>
<!-- 10 txtMarquee-top E -->
<!-- 11 nav S -->
<div id="topNav" class="demoBox ">
<div name="effect11" id="effect11" class="hd"><h3><span>11. </span>导航</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/11.0-nav-iframe.html?&slideDown&300&0&true&true&" frameborder="0"></iframe>
<p class="botTit"><em>12.0-导航</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="fade">fade</option>
<option value="slideDown" selected="selected">slideDown</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="300" selected="selected">300</option>
<option value="100">100</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="鼠标停留多少毫秒后才触发效果">延迟触发<i>[triggerTime]</i>:</td>
<td>
<select name="triggerTime">
<option value="150">150</option>
<option value="300">300</option>
<option value="0" selected="selected">0</option>
</select>
</td>
<td class="n new" title="v2.1 新增：默认是否执行效果">默认执行<i>[defaultPlay]</i>:</td>
<td>
<select name="defaultPlay">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移走，0.3秒后返回默认状态">返回默认<i>[returnDefault]</i>:</td>
<td>
<select name="returnDefault">
<option value="false">false</option>
<option value="true" selected="selected">true</option>
</select>
</td>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing">
<option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery("#nav").slide({ type:"menu", titCell:".nLi", targetCell:".sub"<i></i>});</span></p>
</div>
</div><!-- bd E -->
</div>
<!-- 11 nav E -->
<!-- 12 sideMenu S -->
<div id="sideMenu" class="demoBox ">
<div name="effect12" id="effect12" class="hd"><h3><span>12. </span>手风琴</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/12.0-sideMenu-iframe.html?&slideDown&300&mouseover&150&true&true&" frameborder="0"></iframe>
<p class="botTit"><em>13.0-手风琴</em></p>
</div>
<div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="fade">fade</option>
<option value="slideDown" selected="selected">slideDown</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="300" selected="selected">300</option>
<option value="100">100</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
<td class="n" title="鼠标停留多少毫秒后才触发效果">延迟触发<i>[triggerTime]</i>:</td>
<td>
<select name="triggerTime">
<option value="150">150</option>
<option value="300">300</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：默认是否执行效果">默认执行<i>[defaultPlay]</i>:</td>
<td>
<select name="defaultPlay">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n new" title="v2.1 新增：鼠标移走，0.3秒后返回默认状态">返回默认<i>[returnDefault]</i>:</td>
<td>
<select name="returnDefault">
<option value="false">false</option>
<option value="true" selected="selected">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing">
<option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".sideMen").slide({titCell:"h3", targetCell:"ul",defaultIndex:1<i></i>});</span></p>
</div>
</div><!-- bd E -->
</div>
<!-- 12 sideMenu E -->
<!-- T1 others S -->
<div id="others" class="demoBox">
<div name="effectT1" id="effectT1" class="hd"><h3><span>T1. </span>其它基础效果</h3></div>
<div class="bd">
<ul class="demoList">
<li>
<div class="pic">
<img src="demo/T1.1-multipleLine.jpg" />
</div>
<h3>多行滚动基础示例</h3>
</li>
<li>
<div class="pic">
<img src="demo/T1.2-multipleColumn.jpg" />
</div>
<h3>多列滚动基础示例</h3>
</li>
<li>
<div class="pic">
<img src="demo/T1.3-targetCell.jpg" />
</div>
<h3>targetCell基础示例</h3>
</li>
<li>
<div class="pic">
<img src="demo/T1.4-SuperSlideGroup.jpg" />
</div>
<h3>SuperSlide组合应用基础示例</h3>
</li>
<li class="o">
<div class="pic">
<a href="demo/T1.5-onePage.html" target="_blank"><img src="demo/T1.5-onePage.jpg" /></a>
</div>
<h3>同一页面使用多个效果示例</h3>
</li>
<li class="new">
<div class="pic">
<img src="demo/T1.6-doubleTab.jpg" />
</div>
<h3>双重Tab（slide组合）</h3>
<i></i>
</li>
<li class="new">
<div class="pic">
<img src="demo/T1.7-tabMarquee.jpg" />
</div>
<h3>Tab+无缝滚动（slide组合）</h3>
<i></i>
</li>
<li class="new">
<div class="pic">
<img src="demo/T1.8-picFocus.jpg" />
</div>
<h3>图片导航焦点图</h3>
<i></i>
</li>
</ul>
</div><!-- bd E -->
</div>
<!-- T1 others E -->
<script type="text/javascript">
//隔行添加demoBoxEven
$(".demoBox").each(function(i){ if (i%2==0)$(this).addClass("demoBoxEven"); });
//当前调用代码初始化
$(".params").each(function(ind){
$(this).find(".curJsCode").eq(ind).html(getJsCode(ind));
});
//切换参数调用切换不同效果
$(".params select").change(function(){
if($(this).val()=="easing-more"){ window.open("otherDemo/T2.1/easing.html"); return; }
var srcStr="";
var ind=$(".params").index( $(this).closest(".params") );
var iframe = $(this).closest(".demoBox").find("iframe");
var selects = $(this).closest(".params").find("select");
selects.each(function(){
srcStr += "&"+$(this).val();
});
iframe.attr("src",iframe.attr("src").split('&')[0]+srcStr);
$(".curJsCode").eq(ind).html(getJsCode(ind));
});
//当前调用代码
function getJsCode( ind ){
var curJsCode="";
var $cur = $(".curJsCode").eq(ind);
$(".params").eq(ind).find("select").each(function(){
if( $("option",this).index( $("option:selected",this) ) !=0 || $("option",this).attr("class")=="show")
{
var tempVal = $(this).attr("rel")=="string"?('"'+$(this).val()+'"'):$(this).val();
curJsCode+= "," + $(this).attr("name")+":"+tempVal;
}
});
if(ind==0) curJsCode = curJsCode.substring(1);
$cur.find("i").html(curJsCode);
curJsCode = $cur.html();
return curJsCode;
}
</script>
</div>
<!-- content E -->
<!-- 隐藏代码盒子 S -->
<div id="displayBox">
<div class="hd"><a>X</a><h3></h3></div>
<div class="bd">
<iframe allowTransparency="true" scrolling="yse" src="" frameborder="0"></iframe>
</div>
</div>
<script type="text/javascript">
$(".demoList li").hover(function(){ $(this).addClass("on") },function(){ $(this).removeClass("on") });
$(".demoList li").each(function(i){
$(this).attr("title", $("img",this).attr("src").split("/")[1] +"-"+ $("h3",this).text() )
});
$(".demoList li:not('.o')").click(function(){
$("#displayBox h3").text( $("h3",this).text() );
$("#displayBox iframe").attr("src",$("img",this).attr("src").replace(".jpg",".html"));
$("#displayBox").show();
});
//当前效果代码
$("#displayBox .hd a").click(function(){ $("#displayBox").hide() }); //关闭隐藏盒子
$("#displayBox").blur( function(){ $(this).hide } );
var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
if( isIE6 ){ $(window).scroll(function(){ $("#displayBox").css("top", $(document).scrollTop()+10) }); }
</script>
<!-- 右侧导航 -->
<div class="rightNav">
<a href="#content"><em>^</em>回到顶部</a>
<a href="#effect1"><em>1</em>书签切换</a>
<a href="#effect2"><em>2</em>幻灯片</a>
<a href="#effect3"><em>3</em>图片滚动-左</a>
<a href="#effect4"><em>4</em>图片滚动-上</a>
<a href="#effect5"><em>5</em>图片无缝滚动-左</a>
<a href="#effect6"><em>6</em>图片无缝滚动-上</a>
<a href="#effect7"><em>7</em>文字滚动-左</a>
<a href="#effect8"><em>8</em>文字滚动-上</a>
<a href="#effect9"><em>9</em>文字无缝滚动-左</a>
<a href="#effect10"><em>10</em>文字无缝滚动-上</a>
<a class="new" href="#effect11"><em>11</em>常用导航 [v2.1]</a>
<a class="new" href="#effect12"><em>12</em>手风琴 [v2.1]</a>
<a href="#effectT1"><em>T1</em>其它基础效果</a>
</div>
<script type="text/javascript">
//右侧导航
var btb=$(".rightNav");
var tempS;
$(".rightNav").hover(function(){
var thisObj = $(this);
tempS = setTimeout(function(){
thisObj.find("a").each(function(i){
var tA=$(this);
setTimeout(function(){ tA.animate({right:"0"},200);},50*i);
});
},200);
},function(){
if(tempS){ clearTimeout(tempS); }
$(this).find("a").each(function(i){
var tA=$(this);
setTimeout(function(){ tA.animate({right:"-110"},200,function(){
});},50*i);
});
});
var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
//滚动加载
var scrollLoad =function(){
$("#content iframe[_src]").each(function(){
var t = $(this);
if( t.offset().top<= $(document).scrollTop() + $(window).height() )
{
t.attr( "src",t.attr("_src") ).removeAttr("_src");
}
});//each E
}
scrollLoad();
$(window).scroll(function(){
if(isIE6){ btb.css("top", $(document).scrollTop()+30) }
scrollLoad();
});
</script>
</body>
</html>JS代码(jquery.SuperSlide.2.1.1.js):
/*! * SuperSlide v2.1.1 * 轻松解决网站大部分特效展示问题 * 详尽信息请看官网：http://www.SuperSlide2.com/ * * Copyright 2011-2013,大话主席 * * 请尊重原创，保留头部版权 * 在保留版权的前提下可应用于个人或商业用途 * v2.1.1：修复当调用多个SuperSlide，并设置returnDefault:true 时返回defaultIndex索引错误 */
!function(a){
a.fn.slide=function(b){
return a.fn.slide.defaults={
type:"slide",effect:"fade",autoPlay:!1,delayTime:500,interTime:2500,triggerTime:150,defaultIndex:0,titCell:".hd li",mainCell:".bd",targetCell:null,trigger:"mouseover",scroll:1,vis:1,titOnClassName:"on",autoPage:!1,prevCell:".prev",nextCell:".next",pageStateCell:".pageState",opp:!1,pnLoop:!0,easing:"swing",startFun:null,endFun:null,switchLoad:null,playStateCell:".playState",mouseOverStop:!0,defaultPlay:!0,returnDefault:!1}
,this.each(function(){
var c=a.extend({
}
,a.fn.slide.defaults,b),d=a(this),e=c.effect,f=a(c.prevCell,d),g=a(c.nextCell,d),h=a(c.pageStateCell,d),i=a(c.playStateCell,d),j=a(c.titCell,d),k=j.size(),l=a(c.mainCell,d),m=l.children().size(),n=c.switchLoad,o=a(c.targetCell,d),p=parseInt(c.defaultIndex),q=parseInt(c.delayTime),r=parseInt(c.interTime);
parseInt(c.triggerTime);
var Q,t=parseInt(c.scroll),u=parseInt(c.vis),v="false"==c.autoPlay||0==c.autoPlay?!1:!0,w="false"==c.opp||0==c.opp?!1:!0,x="false"==c.autoPage||0==c.autoPage?!1:!0,y="false"==c.pnLoop||0==c.pnLoop?!1:!0,z="false"==c.mouseOverStop||0==c.mouseOverStop?!1:!0,A="false"==c.defaultPlay||0==c.defaultPlay?!1:!0,B="false"==c.returnDefault||0==c.returnDefault?!1:!0,C=0,D=0,E=0,F=0,G=c.easing,H=null,I=null,J=null,K=c.titOnClassName,L=j.index(d.find("."+K)),M=p=-1==L?p:L,N=p,O=p,P=m>=u?0!=m%t?m%t:t:0,R="leftMarquee"==e||"topMarquee"==e?!0:!1,S=function(){
a.isFunction(c.startFun)&&c.startFun(p,k,d,a(c.titCell,d),l,o,f,g)}
,T=function(){
a.isFunction(c.endFun)&&c.endFun(p,k,d,a(c.titCell,d),l,o,f,g)}
,U=function(){
j.removeClass(K),A&&j.eq(N).addClass(K)}
;
if("menu"==c.type)return A&&j.removeClass(K).eq(p).addClass(K),j.hover(function(){
Q=a(this).find(c.targetCell);
var b=j.index(a(this));
I=setTimeout(function(){
switch(p=b,j.removeClass(K).eq(p).addClass(K),S(),e){
case"fade":Q.stop(!0,!0).animate({
opacity:"show"}
,q,G,T);
break;
case"slideDown":Q.stop(!0,!0).animate({
height:"show"}
,q,G,T)}
}
,c.triggerTime)}
,function(){
switch(clearTimeout(I),e){
case"fade":Q.animate({
opacity:"hide"}
,q,G);
break;
case"slideDown":Q.animate({
height:"hide"}
,q,G)}
}
),B&&d.hover(function(){
clearTimeout(J)}
,function(){
J=setTimeout(U,q)}
),void 0;
if(0==k&&(k=m),R&&(k=2),x){
if(m>=u)if("leftLoop"==e||"topLoop"==e)k=0!=m%t?(0^m/t)+1:m/t;
else{
var V=m-u;
k=1+parseInt(0!=V%t?V/t+1:V/t),0>=k&&(k=1)}
else k=1;
j.html("");
var W="";
if(1==c.autoPage||"true"==c.autoPage)for(var X=0;
k>X;
X++)W+="<li>"+(X+1)+"</li>";
else for(var X=0;
k>X;
X++)W+=c.autoPage.replace("$",X+1);
j.html(W);
var j=j.children()}
if(m>=u){
l.children().each(function(){
a(this).width()>E&&(E=a(this).width(),D=a(this).outerWidth(!0)),a(this).height()>F&&(F=a(this).height(),C=a(this).outerHeight(!0))}
);
var Y=l.children(),Z=function(){
for(var a=0;
u>a;
a++)Y.eq(a).clone().addClass("clone").appendTo(l);
for(var a=0;
P>a;
a++)Y.eq(m-a-1).clone().addClass("clone").prependTo(l)}
;
switch(e){
case"fold":l.css({
position:"relative",width:D,height:C}
).children().css({
position:"absolute",width:E,left:0,top:0,display:"none"}
);
break;
case"top":l.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
height:'+u*C+'px"></div>').css({
top:-(p*t)*C,position:"relative",padding:"0",margin:"0"}
).children().css({
height:F}
);
break;
case"left":l.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
width:'+u*D+'px"></div>').css({
width:m*D,left:-(p*t)*D,position:"relative",overflow:"hidden",padding:"0",margin:"0"}
).children().css({
"float":"left",width:E}
);
break;
case"leftLoop":case"leftMarquee":Z(),l.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
width:'+u*D+'px"></div>').css({
width:(m+u+P)*D,position:"relative",overflow:"hidden",padding:"0",margin:"0",left:-(P+p*t)*D}
).children().css({
"float":"left",width:E}
);
break;
case"topLoop":case"topMarquee":Z(),l.wrap('<div class="tempWrap" style="overflow:hidden;
position:relative;
height:'+u*C+'px"></div>').css({
height:(m+u+P)*C,position:"relative",padding:"0",margin:"0",top:-(P+p*t)*C}
).children().css({
height:F}
)}
}
var $=function(a){
var b=a*t;
return a==k?b=m:-1==a&&0!=m%t&&(b=-m%t),b}
,_=function(b){
var c=function(c){
for(var d=c;
u+c>d;
d++)b.eq(d).find("img["+n+"]").each(function(){
var b=a(this);
if(b.attr("src",b.attr(n)).removeAttr(n),l.find(".clone")[0])for(var c=l.children(),d=0;
d<c.size();
d++)c.eq(d).find("img["+n+"]").each(function(){
a(this).attr(n)==b.attr("src")&&a(this).attr("src",a(this).attr(n)).removeAttr(n)}
)}
)}
;
switch(e){
case"fade":case"fold":case"top":case"left":case"slideDown":c(p*t);
break;
case"leftLoop":case"topLoop":c(P+$(O));
break;
case"leftMarquee":case"topMarquee":var d="leftMarquee"==e?l.css("left").replace("px",""):l.css("top").replace("px",""),f="leftMarquee"==e?D:C,g=P;
if(0!=d%f){
var h=Math.abs(0^d/f);
g=1==p?P+h:P+h-1}
c(g)}
}
,ab=function(a){
if(!A||M!=p||a||R){
if(R?p>=1?p=1:0>=p&&(p=0):(O=p,p>=k?p=0:0>p&&(p=k-1)),S(),null!=n&&_(l.children()),o[0]&&(Q=o.eq(p),null!=n&&_(o),"slideDown"==e?(o.not(Q).stop(!0,!0).slideUp(q),Q.slideDown(q,G,function(){
l[0]||T()}
)):(o.not(Q).stop(!0,!0).hide(),Q.animate({
opacity:"show"}
,q,function(){
l[0]||T()}
))),m>=u)switch(e){
case"fade":l.children().stop(!0,!0).eq(p).animate({
opacity:"show"}
,q,G,function(){
T()}
).siblings().hide();
break;
case"fold":l.children().stop(!0,!0).eq(p).animate({
opacity:"show"}
,q,G,function(){
T()}
).siblings().animate({
opacity:"hide"}
,q,G);
break;
case"top":l.stop(!0,!1).animate({
top:-p*t*C}
,q,G,function(){
T()}
);
break;
case"left":l.stop(!0,!1).animate({
left:-p*t*D}
,q,G,function(){
T()}
);
break;
case"leftLoop":var b=O;
l.stop(!0,!0).animate({
left:-($(O)+P)*D}
,q,G,function(){
-1>=b?l.css("left",-(P+(k-1)*t)*D):b>=k&&l.css("left",-P*D),T()}
);
break;
case"topLoop":var b=O;
l.stop(!0,!0).animate({
top:-($(O)+P)*C}
,q,G,function(){
-1>=b?l.css("top",-(P+(k-1)*t)*C):b>=k&&l.css("top",-P*C),T()}
);
break;
case"leftMarquee":var c=l.css("left").replace("px","");
0==p?l.animate({
left:++c}
,0,function(){
l.css("left").replace("px","")>=0&&l.css("left",-m*D)}
):l.animate({
left:--c}
,0,function(){
l.css("left").replace("px","")<=-(m+P)*D&&l.css("left",-P*D)}
);
break;
case"topMarquee":var d=l.css("top").replace("px","");
0==p?l.animate({
top:++d}
,0,function(){
l.css("top").replace("px","")>=0&&l.css("top",-m*C)}
):l.animate({
top:--d}
,0,function(){
l.css("top").replace("px","")<=-(m+P)*C&&l.css("top",-P*C)}
)}
j.removeClass(K).eq(p).addClass(K),M=p,y||(g.removeClass("nextStop"),f.removeClass("prevStop"),0==p&&f.addClass("prevStop"),p==k-1&&g.addClass("nextStop")),h.html("<span>"+(p+1)+"</span>/"+k)}
}
;
A&&ab(!0),B&&d.hover(function(){
clearTimeout(J)}
,function(){
J=setTimeout(function(){
p=N,A?ab():"slideDown"==e?Q.slideUp(q,U):Q.animate({
opacity:"hide"}
,q,U),M=p}
,300)}
);
var bb=function(a){
H=setInterval(function(){
w?p--:p++,ab()}
,a?a:r)}
,cb=function(a){
H=setInterval(ab,a?a:r)}
,db=function(){
z||(clearInterval(H),bb())}
,eb=function(){
(y||p!=k-1)&&(p++,ab(),R||db())}
,fb=function(){
(y||0!=p)&&(p--,ab(),R||db())}
,gb=function(){
clearInterval(H),R?cb():bb(),i.removeClass("pauseState")}
,hb=function(){
clearInterval(H),i.addClass("pauseState")}
;
if(v?R?(w?p--:p++,cb(),z&&l.hover(hb,gb)):(bb(),z&&d.hover(hb,gb)):(R&&(w?p--:p++),i.addClass("pauseState")),i.click(function(){
i.hasClass("pauseState")?gb():hb()}
),"mouseover"==c.trigger?j.hover(function(){
var a=j.index(this);
I=setTimeout(function(){
p=a,ab(),db()}
,c.triggerTime)}
,function(){
clearTimeout(I)}
):j.click(function(){
p=j.index(this),ab(),db()}
),R){
if(g.mousedown(eb),f.mousedown(fb),y){
var ib,jb=function(){
ib=setTimeout(function(){
clearInterval(H),cb(0^r/10)}
,150)}
,kb=function(){
clearTimeout(ib),clearInterval(H),cb()}
;
g.mousedown(jb),g.mouseup(kb),f.mousedown(jb),f.mouseup(kb)}
"mouseover"==c.trigger&&(g.hover(eb,function(){
}
),f.hover(fb,function(){
}
))}
else g.click(eb),f.click(fb)}
)}
}
(jQuery),jQuery.easing.jswing=jQuery.easing.swing,jQuery.extend(jQuery.easing,{
def:"easeOutQuad",swing:function(a,b,c,d,e){
return jQuery.easing[jQuery.easing.def](a,b,c,d,e)}
,easeInQuad:function(a,b,c,d,e){
return d*(b/=e)*b+c}
,easeOutQuad:function(a,b,c,d,e){
return-d*(b/=e)*(b-2)+c}
,easeInOutQuad:function(a,b,c,d,e){
return(b/=e/2)<1?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c}
,easeInCubic:function(a,b,c,d,e){
return d*(b/=e)*b*b+c}
,easeOutCubic:function(a,b,c,d,e){
return d*((b=b/e-1)*b*b+1)+c}
,easeInOutCubic:function(a,b,c,d,e){
return(b/=e/2)<1?d/2*b*b*b+c:d/2*((b-=2)*b*b+2)+c}
,easeInQuart:function(a,b,c,d,e){
return d*(b/=e)*b*b*b+c}
,easeOutQuart:function(a,b,c,d,e){
return-d*((b=b/e-1)*b*b*b-1)+c}
,easeInOutQuart:function(a,b,c,d,e){
return(b/=e/2)<1?d/2*b*b*b*b+c:-d/2*((b-=2)*b*b*b-2)+c}
,easeInQuint:function(a,b,c,d,e){
return d*(b/=e)*b*b*b*b+c}
,easeOutQuint:function(a,b,c,d,e){
return d*((b=b/e-1)*b*b*b*b+1)+c}
,easeInOutQuint:function(a,b,c,d,e){
return(b/=e/2)<1?d/2*b*b*b*b*b+c:d/2*((b-=2)*b*b*b*b+2)+c}
,easeInSine:function(a,b,c,d,e){
return-d*Math.cos(b/e*(Math.PI/2))+d+c}
,easeOutSine:function(a,b,c,d,e){
return d*Math.sin(b/e*(Math.PI/2))+c}
,easeInOutSine:function(a,b,c,d,e){
return-d/2*(Math.cos(Math.PI*b/e)-1)+c}
,easeInExpo:function(a,b,c,d,e){
return 0==b?c:d*Math.pow(2,10*(b/e-1))+c}
,easeOutExpo:function(a,b,c,d,e){
return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c}
,easeInOutExpo:function(a,b,c,d,e){
return 0==b?c:b==e?c+d:(b/=e/2)<1?d/2*Math.pow(2,10*(b-1))+c:d/2*(-Math.pow(2,-10*--b)+2)+c}
,easeInCirc:function(a,b,c,d,e){
return-d*(Math.sqrt(1-(b/=e)*b)-1)+c}
,easeOutCirc:function(a,b,c,d,e){
return d*Math.sqrt(1-(b=b/e-1)*b)+c}
,easeInOutCirc:function(a,b,c,d,e){
return(b/=e/2)<1?-d/2*(Math.sqrt(1-b*b)-1)+c:d/2*(Math.sqrt(1-(b-=2)*b)+1)+c}
,easeInElastic:function(a,b,c,d,e){
var f=1.70158,g=0,h=d;
if(0==b)return c;
if(1==(b/=e))return c+d;
if(g||(g=.3*e),h<Math.abs(d)){
h=d;
var f=g/4}
else var f=g/(2*Math.PI)*Math.asin(d/h);
return-(h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g))+c}
,easeOutElastic:function(a,b,c,d,e){
var f=1.70158,g=0,h=d;
if(0==b)return c;
if(1==(b/=e))return c+d;
if(g||(g=.3*e),h<Math.abs(d)){
h=d;
var f=g/4}
else var f=g/(2*Math.PI)*Math.asin(d/h);
return h*Math.pow(2,-10*b)*Math.sin((b*e-f)*2*Math.PI/g)+d+c}
,easeInOutElastic:function(a,b,c,d,e){
var f=1.70158,g=0,h=d;
if(0==b)return c;
if(2==(b/=e/2))return c+d;
if(g||(g=e*.3*1.5),h<Math.abs(d)){
h=d;
var f=g/4}
else var f=g/(2*Math.PI)*Math.asin(d/h);
return 1>b?-.5*h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+c:.5*h*Math.pow(2,-10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+d+c}
,easeInBack:function(a,b,c,d,e,f){
return void 0==f&&(f=1.70158),d*(b/=e)*b*((f+1)*b-f)+c}
,easeOutBack:function(a,b,c,d,e,f){
return void 0==f&&(f=1.70158),d*((b=b/e-1)*b*((f+1)*b+f)+1)+c}
,easeInOutBack:function(a,b,c,d,e,f){
return void 0==f&&(f=1.70158),(b/=e/2)<1?d/2*b*b*(((f*=1.525)+1)*b-f)+c:d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c}
,easeInBounce:function(a,b,c,d,e){
return d-jQuery.easing.easeOutBounce(a,e-b,0,d,e)+c}
,easeOutBounce:function(a,b,c,d,e){
return(b/=e)<1/2.75?d*7.5625*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c}
,easeInOutBounce:function(a,b,c,d,e){
return e/2>b?.5*jQuery.easing.easeInBounce(a,2*b,0,d,e)+c:.5*jQuery.easing.easeOutBounce(a,2*b-e,0,d,e)+.5*d+c}
}
);
分享到QQ
分享到微博
微信扫一扫
