SuperSlide簡介及基礎使用方法

superslide有什么用？

一個jquery插件解決大部分網站特效問題！SuperSlide 致力于解決網站大部分特效展示問題，使網站代碼規范整潔，方便維護更新。包括焦點圖、Tab標簽、圖片滾動等只需要一個SuperSlide即可解決！

superslide官網：http://www.superslide2.com

作者如是說

很久之前我也是一個網站新手，在制作網頁過程中，經常需要用到各種特效，于是到網上找合適的插件。找到后要熟悉它的參數、用法等，如果用到幾種不同特效，就要找幾個不同插件，結果頁面代碼臃腫，加載緩慢，還要害怕會不會沖突！實在痛苦。

于是我就想可不可以將多個特效合一，以后只需要調用一個插件就能實現網頁大部分特效。經過千錘百煉后一個能實現各種效果的插件就浮出水面了，為了表示其異于常人的能力，我給它起了一個霸氣的名字 -- SuperSlide！

superslide應該怎么用？

首先，你需要了解，superslide是一款基于jquery的js插件，所以在使用的時候需要事先引入jquery。superslide支持1.x，2.x，3.x，最低支持版本為1.4.2?？梢愿鶕銓嶋H項目來選擇那個jq版本，如果需要兼容ie678，則只能使用1.x版本的，如果不需兼容則可以大膽使用3.x的。

1、引用jQuery.js 和 jquery.SuperSlide.js

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js"></script>

2、編寫html結構

<div class="slideTxtBox">
	<div class="hd">
		<ul><li>教育</li><li>培訓</li></ul>
	</div>
	<div class="bd">
		<ul>
			<li><time>2011-11-11</time><a href="#" target="_blank">中國打破了世界軟件巨頭規則</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">口語：會說中文就能說英語！</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">農場摘菜不如在線學外語好玩</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">數理化老師竟也看學習資料？</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">學英語送ipad2,45天突破聽說</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">學外語，上北外！</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">那些無法理解的荒唐事</a></li>
		</ul>
		<ul>
			<li><time>2011-11-11</time><a href="#" target="_blank">名師教作文：３妙招巧寫高分</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">耶魯小子：教你備考SAT</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">施強：高端專業語言教學</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">數理化老師竟也看學習資料？</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">【推薦】名校英語方法曝光！</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">2012高考“考點”大曝光!!</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">漲價仍爆棚假日旅游冰火兩重天</a></li>
		</ul>				
	</div>
</div>

3、編寫CSS，為HTML賦予樣色

.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left;  }
.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 10px 0 20px;   border-bottom:1px solid #ddd;  position:relative; }
.slideTxtBox .hd ul{ float:left;  position:absolute; left:20px; top:-1px; height:32px;   }
.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
.slideTxtBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
.slideTxtBox .bd li{ height:24px; line-height:24px;   }
.slideTxtBox .bd li .date{ float:right; color:#999;  }

4、調用SuperSlide

<script type="text/javascript">$(".slideTxtBox").slide();</script>

5、superslide常用參數

autoPage：程序自動分頁，需結合titCell使用，若為true，則titCell為導航元素的包裹層對象。ps：scroll>1時，記得設置autoPage:true，否則分頁錯誤。

effect：動畫效果，包括：fade漸顯、top上滾動、left左滾動、topLoop上循環滾動、leftLoop左循環滾動、topMarquee上無縫循環滾動、leftMarquee左無縫循環滾動、fold淡入淡出、slideDown下拉效果

autoPlay：自動運行。

interTime：自動運行間隔，默認2500毫秒；當effect為無縫滾動(topMarquee/leftMarquee)時，相當于運行速度。 

delayTime：切換效果持續時間（一次切換效果執行所用的時間長度），默認500毫秒；

后記

superslide可以產生很多很多不同的效果，整個js文件僅12Kb，滿足我們絕大多數需求的同時不再需要到處去找尋插件，也不用擔心引入的js太多而影響網站性能，更不用擔心多個插件之間的兼容性問題，推薦使用。

另，更多的superslide效果會在后續陸續添加，你也可以訪問superslide進行查閱。

© 致遠 2020-02-08，原創內容，轉載請注明出錯：SuperSlide簡介及基礎使用方法