10/14
2014
已弃坑。我下面试的几次，都是自己对其示例进行了结构的简化，想要以后用着方便，事实证明这么做意义不大，该用的时候拉过来源代码直接修改就成了。以后只做一些补充就行了。
用superslide做焦点图，其切换间隔太快，但是demo文档里又没有这个参数设置，于是去查看官网的参数文档,找到了interTime参数，如下：
jQuery(".slideBox").slide({mainCell:".bd ul",effect:"fold",autoPlay:true,interTime:5000});
css里有些地方得改一下：
.slideBox .bd{ position:relative; height:100%; z-index:0; left:50%; margin-left:-960px; }/*这里设置居中*/
/*.slideBox .bd img 如无必要，不要设置width，否则可能导致图片变形*/
/*指示器默认是靠右的，可能会被右侧的漂浮广告挡住，给.slideBox .hd设置一个right值比较合适。*/
注意参数最后是不加分号的，加了报错。另附动画效果参数：
[v1.0] fade：渐显； || top：上滚动；|| left：左滚动；|| topLoop：上循环滚动；|| leftLoop：左循环滚动；|| topMarquee：上无缝循环滚动；|| leftMarquee：左无缝循环滚动；
[v2.0] fold：淡入淡出
[v2.1] slideDown：下拉效果
首先上其官网，SuperSlide需要先引入jq。
1.图片向左无缝持续滚动
我首先试了图片的无缝持续滚动，之前试过一个专做滚动的js插件，然后用SuperSlide来做，感觉实在是太糟糕了。为什么呢？在那篇文章里，我不需要考虑增加不需要的结构，直接把图片列出来就OK了。SuperSlide则复杂些，最坑的是说明文档中对结构没有什么描述，试的时候各种痛苦，试成功之后又进行了简化，发现其实走了很多弯路。会用之后用起来还是很爽的。图片滚动时的抖动似乎比那个滚动插件少。但是经过在IE9 CR38 FF测试之后，发现同样的滚动速度，cr里面滚动得比其他两个浏览器里面慢，而且内存占用一直在上升（即使是官方的demo页面也是内存不断增加）。似乎越是大图越明显。先凑合用吧
demo如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>superslide的测试记录</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<body>
<h2>1.图片无缝不间断滚动</h2>
<div class="imgbox1">
<img src="/f/Screenshot_2014-09-09-14-24-38.png" alt="">
<img src="/f/Screenshot_2014-08-28-12-46-49.png" alt="">
<img src="/f/Screenshot_2014-07-20-11-24-59.JPG" alt="">
<img src="/f/Screenshot_2014-07-20-11-27-15.JPG" alt="">
<img src="/f/%E8%B1%8C%E8%B1%86%E8%8D%9A%E6%88%AA%E5%9B%BE20140209104905.JPG" alt="">
</div>
<script type="text/javascript">
jQuery("body").slide({mainCell:".imgbox1",autoPlay:true,effect:"leftMarquee",vis:3,interTime:5});
</script>
</body>
</html>
最后的参数设置里，第一个对象需要是图片外至少2层的对象，第二个cell的是图片外1层的对象（即包含图片的容器）。包含图片的容器不必设置宽度，这个宽度会根据参数里的显示几个图片对象自动调整。
图片向上无缝持续滚动
把下面代码复制到上面代码的body里面就行了。
<h2>2.图片无缝不间断向上滚动</h2>
<div class="imgbox2" style="width:480px;">
<img src="/f/Screenshot_2014-09-09-14-24-38.png" alt="">
<br>
<img src="/f/Screenshot_2014-08-28-12-46-49.png" alt="">
<br>
<img src="/f/Screenshot_2014-07-20-11-24-59.JPG" alt="">
<br>
<img src="/f/Screenshot_2014-07-20-11-27-15.JPG" alt="">
<br>
<img src="/f/%E8%B1%8C%E8%B1%86%E8%8D%9A%E6%88%AA%E5%9B%BE20140209104905.JPG" alt="">
</div>
<script type="text/javascript">
jQuery("body").slide({mainCell:".imgbox2",autoPlay:true,effect:"topMarquee",vis:1,interTime:5});
</script>
同横向滚动不同的是，纵向图片的外部div最好设置宽度，否则其宽度为100%而图片宽度才30%，你在图片外的空白区域也会触发鼠标经过滚动停止的效果。
文字向左无缝持续滚动
把下面代码复制到上面代码的body里面就行了。
<h2>文字向左无缝持续滚动</h2>
<div class="textbox2" style="height: 16px;">
<a href="http://www.saber.love/">saber酱的抱枕</a>
<a href="http://www.saber.love/">saber酱的抱枕</a>
<a href="http://www.saber.love/">saber酱的抱枕</a>
<a href="http://www.saber.love/">saber酱的抱枕</a>
</div>
<script type="text/javascript">
jQuery("body").slide({mainCell:".textbox2",autoPlay:true,effect:"leftMarquee",vis:3,interTime:50,trigger:"click"});
</script>
宽度是由可视数量来决定的，我们需要设置的是高度。例如我有四条文字，可视显示3条，不规定高度的话，多出的一条会显示到第二行了。其实就是可视区域的总长度就是宽度，这个div有宽度了，多的文字放不下就挤到下一行去了。设置了高度就没有这个问题了，多的文字会自动隐藏到后边。
文字向上无缝持续滚动
把下面代码复制到上面代码的body里面就行了。
<h2>文字向上无缝持续滚动</h2>
<ul class="textbox1" style=" width: 130px;">
<li><a href="http://www.saber.love/">saber酱的抱枕</a></li>
<li><a href="http://www.saber.love/">saber酱的抱枕</a></li>
<li><a href="http://www.saber.love/">saber酱的抱枕</a></li>
<li><a href="http://www.saber.love/">saber酱的抱枕</a></li>
<li><a href="http://www.saber.love/">saber酱的抱枕</a></li>
<li><a href="http://www.saber.love/">saber酱的抱枕</a></li>
<li><a href="http://www.saber.love/">saber酱的抱枕</a></li>
<li><a href="http://www.saber.love/">saber酱的抱枕</a></li>
</ul>
<script type="text/javascript">
jQuery("body").slide({mainCell:".textbox1",autoPlay:true,effect:"topMarquee",vis:3,interTime:50,trigger:"click"});
</script>
和图片的纵向滚动类似，cell的div其高度会根据可视数量的设置而重新定义，因此不必给外层div设置高度（实际上自己定义的最后也是无效的）。可上个滚动插件相比，li也不会有空白。但是那个插件可以四个方向滚动，SuperSlide只看到有向上和向左两种滚动方式。
