SuperSlide Blog

很多新手使用superslide的時候會遇到“Uncaught TypeError: jQuery(…).slide is not a function”的提示，導致插件無法運行。

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

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

如下面錯誤示范：

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

目前jQuery有三個大版本：

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

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

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

superslide均支持上述所有版本，最低版本為1.4.2?？梢愿鶕銓嶋H項目來選擇那個jq版本，如果需要兼容ie678，則只能使用1.x版本的，如果不需兼容則可以大膽使用3.x的。

因為ajax是異步加載，所以要保證異步獲取代碼成功后，插入數據，再執行superslide，才能正常運行，正確代碼如下：

<!-- 標準superslide盒子 -->
<div class="slideBox">
    <div class="hd">
        <ul></ul>
    </div>
    <div class="bd">
        <ul>
            <!-- 內容區，ajax寫入 -->
        </ul>
    </div>
</div>

<script>
    $.ajax({ // ajax開始
      url: "test.html",
      success: function(html){ //1、保證獲取成功后再執行
        $(".slideBox .bd ul").append(html); //2、往bd里面插入數據
        $(".slideBox").slide({  titCell:".hd ul", autoPage:true }); //3、bd里面有數據了，才執行superslide
      }
    });
</script>

有小伙伴反應在彈窗效果里面嵌套SuperSlide會無效果，其實原因在于js獲取不了隱藏元素的寬高，解決辦法是
1、SuperSlide對象（包括父元素）默認顯示，不能隱藏；
2、先執行SuperSlide
3、再用js隱藏SuperSlide對象

通常彈窗代碼如下：

<!-- 彈窗 -->
<div class="popBox" style="display: none">
    <!-- slider -->
    <div class="slider">
        <div class="hd">
        ......
        </div>
        <div class="bd">
        .......
        </div>
    </div>
</div>
<script>jQuery(".slider").slide({ ...... });</script>

正確代碼如下：

<!-- 彈窗 -->
<div class="popBox" style="display: block"><!-- 彈窗不能隱藏 -->
    <!-- slider -->
    <div class="slider">
        <div class="hd">
        ......
        </div>
        <div class="bd">
        .......
        </div>
    </div>
</div>
<script>
jQuery(".slider").slide({ ...... });//先執行Superslide
jQuery(".popBox").hide();//再用js隱藏彈窗
</script>

導航下拉菜單被遮住或顯示不全問題所在和解決辦法

導航下拉菜單被banner遮住/顯示不全，這種問題是老生常談了，經常有新手會問，有些人做了2、3年的還會經常犯錯，而且好多人還以為是js問題，其實這是基本的css知識。我覺得還是有必要寫一遍文章解釋給新手們。

一、導航下拉菜單被遮住，那是因為層疊關系錯誤

我們必須理解層疊關系滿足的2個條件：

• 1、必須是同級；
• 2、二者分別設定了position:relative 或 absolute 或 fixed；
• 這時候通過設置z-index才有效

看看我們比較常見的網頁布局：

html:

<!-- 頭部 -->
<div class="header">

    <div class="nav">
        <ul class="mNav">
            這是下拉菜單
            .........
        </ul>
    </div>

</div>

<!-- banner -->
<div class="banner">
    <div class="slider">這是焦點圖....</div>
</div>

錯誤css

.header{ }
.header .nav{ z-index:9999; height:50px; color:#fff; text-align:center;  }
.banner{ position:relative; margin:10px auto; height:300px; }

上面css里吧nav的z-index設置成9999，但發現下拉還是被擋住，這是因為此時banner設置了position,會在nav上面。

想要nav在banner上面，就需要向上查找，發現nav的外層(header)和banner在同一級（滿足條件1），

這時候同時設置header和banner的position和z-index，使header在banner上面即可，此時nav的z-index已經無關重要了。

正確css:

.header{ position:relative; z-index:1 }
.header .nav{  height:50px; color:#fff; text-align:center; }
.banner{ position:relative; z-index:0; margin:10px auto; height:300px; }

例子2：

如果你的html結構這樣的：

<div class="header">

    <div class="nav">
        <ul class="mNav">
            這是下拉菜單
            .........
        </ul>
    </div>

</div>

<!-- content -->
<div class="content">
    <div class="banner">
        <div class="slider">這是焦點圖....</div>
    </div>
</div>

那么分別設置header和content的position和z-index，因為2者在最外層并且同級。

其它同理。

二、導航下拉菜單顯示不全是因為外層設置了overflow:hidden

很多時因為網頁比較復雜，層級比較多，所以經常忽略了外層或者外外外層設置了overflow:hidden導致導航下拉菜單顯示不全，其實只要仔細查找就能解決問題，把overflow:hidden去掉，如果需要清除浮動，可以用其它方法，百度css清除浮動就有了。

在同一個頁面使用多個相同或不同的效果其實很簡單，直接把“基礎效果”拼起來就可以了。
為了詳細演示，我在基礎效果那里做多一個demo：“11.5-同一個頁面使用多個效果示例”。
你可以到下載頁面下載“基礎示例”代碼研究下。

當我們使用滾動效果，例如：left、leftLoop、top、topLoop、leftMarquee、topMarquee等的時候，SuperSlide會自動設置一個“遮罩層（tempWrap）”來限制可視范圍，超出范圍的將會被隱藏起來。

可視范圍取決于 vis 參數和一個滾動元素的寬高，例如：

參數vis：3，effect：left；滾動元素為li。即li左滾動，可視范圍為3個li寬度。

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

這樣做法是為了保證效果的正確顯示，而不會出現半個li的情況。

但是，有時候客觀原因使我們必須設置具體的某一個值，而不是程序計算出來的結果，這時候我們可以用css來強制設置tempWrap的寬高。

很簡單，即：
[code lang="css"]
.superSlide .tempWrap{ width:999px !important }/* 用!important強制設置即可 */
[/code]

其實不是ecshop與SuperSlide沖突，而是ecshop與jQuery沖突，而SuperSlide是基于jQuery的，所以就。。。。。
解決方法很多，百度“ecshop jquery”就有了，具體那個好我就不清楚了，因為我不用ecshop的。。。。
百度鏈接：http://www.baidu.com/s?wd=ecshop%20jquery&pn=10&ie=utf-8&f=3&rsv_page=1

我們知道，html的執行順序是從上而下的，對js的執行也是一樣的。所以做好的做法是需要使用特效的對象結束后立刻調用SuperSlide那就能獲取最佳的用戶體驗，解決上述問題。
例如：
[code lang="html"]
<div class="box">
<div class="hd"><ul><li>1</li> <li>2</li> <li>3</li></ul></div>
<div class="bd">
<ul><li>信息1</li>...</ul>
<ul><li>信息2</li>...</ul>
<ul><li>信息3</li>...</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".box").slide();/*當box結束后立刻調用SuperSlide，會得到最好效果*/
</script>
[/code]

有些用戶會用下面方式調用：
[code lang="js"]
$(document).ready(function(){
jQuery(".box").slide();
});
[/code]

或者：
[code lang="js"]
jQuery(function($) {
jQuery(".box").slide();
});
[/code]

其實這兩種執行過程是一樣的，都是等待整個頁面的dom加載完后再執行SuperSlide，相當于把調用SuperSlide的代碼放到頁面最下面。
這樣的話，就會造成頁面內容先顯示，直到頁面結束后再執行SuperSlide把相關內容隱藏，最后整個效果才正常。