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。可以根据你实际项目来选择那个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把相关内容隐藏，最后整个效果才正常。