SuperSlide2擴(kuò)展效果插件 v2.1.3 官方最新版

軟件介紹

SuperSlide特別版是一款可以幫助用戶(hù)制作出各種漂亮酷炫網(wǎng)頁(yè)的前端開(kāi)發(fā)插件，這款軟件是基于jQuery插件所開(kāi)發(fā)出來(lái)的。我們不僅可以使用SuperSlide2來(lái)解決網(wǎng)頁(yè)的特效展示問(wèn)題，同時(shí)還可以通過(guò)這款軟件來(lái)網(wǎng)頁(yè)前端來(lái)完成各種動(dòng)態(tài)特效的制作，功能非常強(qiáng)大。

SuperSlide特別版軟件簡(jiǎn)介

SuperSlide擴(kuò)展效果插件是專(zhuān)為使用jQuery進(jìn)行jsp網(wǎng)頁(yè)開(kāi)發(fā)的用戶(hù)制作的效果插件，擁有標(biāo)簽、書(shū)簽、焦點(diǎn)圖、幻燈片、圖片滾動(dòng)、文字滾動(dòng)、導(dǎo)航、手風(fēng)琴等一些基礎(chǔ)的效果，基本上每個(gè)開(kāi)發(fā)人員都會(huì)使用到這些效果，而且不會(huì)出現(xiàn)代碼沖突，維護(hù)起來(lái)也很簡(jiǎn)單方便，是您制作網(wǎng)頁(yè)的必備神器。

SuperSlide致力于解決網(wǎng)站大部分特效展示問(wèn)題，使網(wǎng)站代碼規(guī)范整潔，方便維護(hù)更新。網(wǎng)站上常用的“焦點(diǎn)圖/幻燈片”“Tab標(biāo)簽切換”“圖片滾動(dòng)”“無(wú)縫滾動(dòng)”等只需要一個(gè)SuperSlide即可解決！從此無(wú)需網(wǎng)上苦苦尋覓特效，無(wú)需加載n個(gè)插件，無(wú)需害怕代碼沖突，你需要的只是一個(gè)SuperSlide！還可以多個(gè)SuperSlide組合創(chuàng)造更多效果哦~

SuperSlide特別版軟件功能

效果類(lèi)型，可選"slide"||"menu"，引入type:"menu"專(zhuān)門(mén)處理菜單/導(dǎo)航效果

默認(rèn)是否執(zhí)行效果（第一次運(yùn)行是否執(zhí)行效果）常用于導(dǎo)航/菜單

鼠標(biāo)移出容器，是否返回默認(rèn)狀態(tài)，常用于導(dǎo)航/菜單

內(nèi)容切換加載，暫時(shí)只支持圖片，必須配合后臺(tái)程序使用。當(dāng)為圖片的時(shí)候switchLoad為圖片實(shí)際路徑的屬性名稱(chēng)

每次切換效果開(kāi)始時(shí)執(zhí)行函數(shù)，用于處理特殊情況或創(chuàng)建更多效果。用法 satrtFun:function(i,c){ }； 其中i為當(dāng)前分頁(yè)，c為總頁(yè)數(shù)

增加傳遞參數(shù)毫秒，titCell觸發(fā)時(shí)間，默認(rèn)150毫秒延遲，以防重復(fù)執(zhí)行效果。若為0即鼠標(biāo)移過(guò)titCell立刻執(zhí)行效果

前/后按鈕是否繼續(xù)循環(huán)，若為false則當(dāng)翻動(dòng)到最前/后頁(yè)時(shí)，前/后按鈕點(diǎn)擊無(wú)效，同時(shí)增加prevStop/nextStop類(lèi)名控制樣色

毫秒；自動(dòng)運(yùn)行間隔。當(dāng)effect為無(wú)縫滾動(dòng)(topMarquee/leftMarquee)時(shí)，相當(dāng)于運(yùn)行速度。

軟件特色

1、SuperSlide可以幫助用戶(hù)快速的設(shè)計(jì)網(wǎng)站展示的特效

2、支持設(shè)計(jì)標(biāo)簽切換效果

3、支持切換幻燈片設(shè)置

4、可以設(shè)計(jì)圖片滾動(dòng)方式，向上、向左

5、可以設(shè)計(jì)網(wǎng)站圖片無(wú)縫滾動(dòng)，一張一張的展示循環(huán)播放

6、可以設(shè)置文字的滾動(dòng)方式，就像LED字幕一樣

SuperSlide特別版使用說(shuō)明

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

因?yàn)檫@個(gè)插件是基于jQuery的插件，所以前提必須先引用jQuery，再引用。

2、編寫(xiě)HTML

以下是默認(rèn)的HTMl結(jié)構(gòu)，分別是 ".hd" 里面包含ul， ".bd" 里面包含ul

3、編寫(xiě)CSS，為HTML賦予樣色

認(rèn)真檢查您的css，保證兼容大部分瀏覽器前提下再調(diào)用插件

4、調(diào)用插件方法

在本例中，請(qǐng)?jiān)?“.slideTxtBox” div結(jié)束后立刻調(diào)用插件，這樣會(huì)得到最好的效果，避免整個(gè)頁(yè)面加載后再調(diào)用；因?yàn)槭悄J(rèn)HTML結(jié)構(gòu)，所以參數(shù)都為默認(rèn)值，不用填寫(xiě)titCell、mainCell等。

5、效果如下

SuperSlide特別版常見(jiàn)問(wèn)題

superslide遇到j(luò)Query(…).slide is not a function解決辦法？

很多新手使用superslide的時(shí)候會(huì)遇到“Uncaught TypeError: jQuery(…).slide is not a function”的提示，導(dǎo)致插件無(wú)法運(yùn)行。

這種情況，請(qǐng)仔細(xì)檢查你的頁(yè)面代碼，可以在瀏覽器右擊查看“網(wǎng)頁(yè)源代碼”，然后搜索“jquery”關(guān)鍵詞，看看你頁(yè)面是不是引用了多個(gè)“jquery.js”，如果是那么只需保留一個(gè)jquery.js（通常是保留版本最新的），放在其它js前面即可。

這種情況通常是引用了多個(gè)jquery插件，每個(gè)插件都引用一個(gè)jquery.js，其實(shí)是多余的，只需保留一個(gè)即可。

如下面錯(cuò)誤示范：

正確示范（保留一個(gè)最新版本，放在其它js前面）

superslide支持jquery哪些版本？

目前jQuery有三個(gè)大版本：

1.x：兼容ie678,使用最為廣泛的，官方只做BUG維護(hù)，功能不再新增。因此一般項(xiàng)目來(lái)說(shuō)，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)

2.x：不兼容ie678，很少有人使用，官方只做BUG維護(hù)，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)

3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，一般不會(huì)使用3.x版本的，很多老的jQuery插件不支持這個(gè)版本。目前該版本是官方主要更新維護(hù)的版本。

superslide均支持上述所有版本，最低版本為1.4.2?？梢愿鶕?jù)你實(shí)際項(xiàng)目來(lái)選擇那個(gè)jq版本，如果需要兼容ie678，則只能使用1.x版本的，如果不需兼容則可以大膽使用3.x的。

導(dǎo)航下拉菜單被遮住或顯示不全問(wèn)題所在和解決辦法？

導(dǎo)航下拉菜單被banner遮住/顯示不全，這種問(wèn)題是老生常談了，經(jīng)常有新手會(huì)問(wèn)，有些人做了2、3年的還會(huì)經(jīng)常犯錯(cuò)，而且好多人還以為是js問(wèn)題，其實(shí)這是基本的css知識(shí)。我覺(jué)得還是有必要寫(xiě)一遍文章解釋給新手們。

一、導(dǎo)航下拉菜單被遮住，那是因?yàn)閷盈B關(guān)系錯(cuò)誤

我們必須理解層疊關(guān)系滿(mǎn)足的2個(gè)條件：

1、必須是同級(jí)；

2、二者分別設(shè)定了position:relative 或 absolute 或 fixed；

這時(shí)候通過(guò)設(shè)置z-index才有效

SuperSlide滾動(dòng)的遮罩層寬/高怎么計(jì)算的？如何設(shè)置具體一個(gè)值？

當(dāng)我們使用滾動(dòng)效果，例如：left、leftLoop、top、topLoop、leftMarquee、topMarquee等的時(shí)候，SuperSlide會(huì)自動(dòng)設(shè)置一個(gè)“遮罩層（tempWrap）”來(lái)限制可視范圍，超出范圍的將會(huì)被隱藏起來(lái)。

可視范圍取決于 vis 參數(shù)和一個(gè)滾動(dòng)元素的寬高，例如：

參數(shù)vis：3，effect：left；滾動(dòng)元素為li。即li左滾動(dòng)，可視范圍為3個(gè)li寬度。

公式： tempWrap寬度 = li寬度 * vis = （li的width + li的padding + li的margin）*3

這樣做法是為了保證效果的正確顯示，而不會(huì)出現(xiàn)半個(gè)li的情況。

但是，有時(shí)候客觀原因使我們必須設(shè)置具體的某一個(gè)值，而不是程序計(jì)算出來(lái)的結(jié)果，這時(shí)候我們可以用css來(lái)強(qiáng)制設(shè)置tempWrap的寬高。