对于是自己造轮子，还是使用别人已经造好的轮子的这个问题，我相信每个人都有自己的理解。我的理解是看业务场景，有些可以复用的功能可以引用造好的轮子，毕竟github上面点赞多的都是经
过了许许多多人的验证的，确实好用。
今天看到一加手机的论坛页有个产品banner和产品展示的导航，发现动画做的还是很流畅的，就花时间研究了下是如果做的，然后就发现是引用了superSlider这个插件。
superSlider现在的最新版本是2.1;SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。
网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！
superSlider高级部分的功能需要收费，不过我们基本上也只是用到基础功能就可以实现大部分网站比较简单的特效了，这个插件的主要功能是内容的切换，图片的切换以及展示。
这里是他的官网http://www.superslide2.com/；里面有demo可以让你去了解。
这个插件的参数是比较多的http://www.superslide2.com/param.html；但是也比较好理解。
插件的介绍到这里，我们具体来看看如何在实际运用中使用该插件。
上代码时间到，哈哈哈。
1.页面结构
1 2 3 4 5 6 7 8 9 10 11 12 13
| <div id="portal_block_198" class="block move-span"> <div id="portal_block_198_content" class="dxb_bc"> <div class="dfsj_yjsh"> <a class="prev"></a> <a class="next"></a> <div class="tempWrap" style="overflow:hidden; position:relative; width:627px"> <ul class="dfsj_imgs clear" style="width: 2090px; position: relative; overflow: hidden; padding: 0px; margin: 0px; left: -1045px;"> <li class="clone" style="float: left; width: 200px;"><a href="http://www.oneplusbbs.com/thread-2884295-1-1.html" target="_blank" title="撩妹大法"><img class="dfsj_lazy" src="http://static.oneplus.cn/data/attachment/portal/201608/19/143640uvuyn8pgwxdvxnpg.jpg" data-original="http://static.oneplus.cn/data/attachment/portal/201608/19/143640uvuyn8pgwxdvxnpg.jpg" width="200" height="130" alt="撩妹大法" style="display: inline;"><span></span><em>撩妹大法</em></a></li><li style="float: left; width: 200px;"><a href="http://www.oneplusbbs.com/thread-2888026-1-1.html" target="_blank" title="香港旅行摄影"><img class="dfsj_lazy" src="http://static.oneplus.cn/data/attachment/portal/201608/19/143434sylwg4j2gmwdlj1l.jpg" data-original="http://static.oneplus.cn/data/attachment/portal/201608/19/143434sylwg4j2gmwdlj1l.jpg" width="200" height="130" alt="香港旅行摄影" style="display: inline;"><span></span><em>香港旅行摄影</em></a></li><li style="float: left; width: 200px;"><a href="http://www.oneplusbbs.com/thread-2887688-1-1.html" target="_blank" title="素颜照片"><img class="dfsj_lazy" src="http://static.oneplus.cn/data/attachment/portal/201608/19/143501mllckwkbfkmc8ez7.jpg" data-original="http://static.oneplus.cn/data/attachment/portal/201608/19/143501mllckwkbfkmc8ez7.jpg" width="200" height="130" alt="素颜照片" style="display: inline;"><span></span><em>素颜照片</em></a></li><li style="float: left; width: 200px;"><a href="http://www.oneplusbbs.com/thread-2887408-1-1.html" target="_blank" title="日常＂余晖＂"><img class="dfsj_lazy" src="http://static.oneplus.cn/data/attachment/portal/201608/19/143532a5cebmnef5qf5wee.jpg" data-original="http://static.oneplus.cn/data/attachment/portal/201608/19/143532a5cebmnef5qf5wee.jpg" width="200" height="130" alt="日常＂余晖＂" style="display: inline;"><span></span><em>日常＂余晖＂</em></a></li><li style="float: left; width: 200px;"><a href="http://www.oneplusbbs.com/thread-2887283-1-1.html" target="_blank" title="漫游上下九"><img class="dfsj_lazy" src="http://static.oneplus.cn/data/attachment/portal/201608/19/143555uffc73pf322sdvwb.jpg" data-original="http://static.oneplus.cn/data/attachment/portal/201608/19/143555uffc73pf322sdvwb.jpg" width="200" height="130" alt="漫游上下九" style="display: inline;"><span></span><em>漫游上下九</em></a></li><li style="float: left; width: 200px;"><a href="http://www.oneplusbbs.com/thread-2884633-1-1.html" target="_blank" title="一加一戈壁行"><img class="dfsj_lazy" src="http://static.oneplus.cn/data/attachment/portal/201608/19/143617su4mgy56utgg1gu1.jpg" data-original="http://static.oneplus.cn/data/attachment/portal/201608/19/143617su4mgy56utgg1gu1.jpg" width="200" height="130" alt="一加一戈壁行"><span></span><em>一加一戈壁行</em></a></li><li style="float: left; width: 200px;"><a href="http://www.oneplusbbs.com/thread-2884295-1-1.html" target="_blank" title="撩妹大法"><img class="dfsj_lazy" src="http://static.oneplus.cn/data/attachment/portal/201608/19/143640uvuyn8pgwxdvxnpg.jpg" data-original="http://static.oneplus.cn/data/attachment/portal/201608/19/143640uvuyn8pgwxdvxnpg.jpg" width="200" height="130" alt="撩妹大法"><span></span><em>撩妹大法</em></a></li><li class="clone" style="float: left; width: 200px;"><a href="http://www.oneplusbbs.com/thread-2888026-1-1.html" target="_blank" title="香港旅行摄影"><img class="dfsj_lazy" src="http://static.oneplus.cn/data/attachment/portal/201608/19/143434sylwg4j2gmwdlj1l.jpg" data-original="http://static.oneplus.cn/data/attachment/portal/201608/19/143434sylwg4j2gmwdlj1l.jpg" width="200" height="130" alt="香港旅行摄影"><span></span><em>香港旅行摄影</em></a></li><li class="clone" style="float: left; width: 200px;"><a href="http://www.oneplusbbs.com/thread-2887688-1-1.html" target="_blank" title="素颜照片"><img class="dfsj_lazy" src="http://static.oneplus.cn/data/attachment/portal/201608/19/143501mllckwkbfkmc8ez7.jpg" data-original="http://static.oneplus.cn/data/attachment/portal/201608/19/143501mllckwkbfkmc8ez7.jpg" width="200" height="130" alt="素颜照片"><span></span><em>素颜照片</em></a></li><li class="clone" style="float: left; width: 200px;"><a href="http://www.oneplusbbs.com/thread-2887408-1-1.html" target="_blank" title="日常＂余晖＂"><img class="dfsj_lazy" src="http://static.oneplus.cn/data/attachment/portal/201608/19/143532a5cebmnef5qf5wee.jpg" data-original="http://static.oneplus.cn/data/attachment/portal/201608/19/143532a5cebmnef5qf5wee.jpg" width="200" height="130" alt="日常＂余晖＂"><span></span><em>日常＂余晖＂</em></a></li> </ul> </div> </div> </div> </div>
|
2.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| *{margin:0;padding:0} ul li{list-style:none;} a{color:#333;text-decoration:none;} .clear:after{content:'';display:block;clear:both;} .clear{zoom:1;} .dfsj_yjsh{position:relative;width:618px;margin-left:12px;overflow:hidden;} .dfsj_yjsh a.next,.dfsj_yjsh a.prev{position:absolute;top:40px;display:block;width:26px;height:50px;background:url(http://static.oneplus.cn/dfsj_imgs/dfsj_yjshjt.png) no-repeat;z-index:1;} .dfsj_yjsh a.prev{left:0;background-position:0 0;} .dfsj_yjsh a.next{right:0;background-position:-26px 0;} .dfsj_yjsh a.prev:hover{background-position:0 -50px;} .dfsj_yjsh a.next:hover{background-position:-26px -50px;} .dfsj_imgs li{position:relative;float:right;width:200px;height:130px;margin:0 9px 0 0px;font:400 12px/12px 'Microsoft Yahei';} .dfsj_imgs a,.dfsj_imgs a:visited{color:#fff;} .dfsj_imgs li img{height:130px;width:200px;} .dfsj_imgs span,.dfsj_imgs em{position:absolute;left:0;bottom:0;width:200px;height:26px;line-height:26px;overflow:hidden;font-size:14px;text-align:center;} .dfsj_imgs span{background-color:#000;opacity:0.4;filter:alpha(opacity=40);}
|
3.js
1
| $(".dfsj_yjsh").slide({mainCell:".dfsj_imgs",autoPage:true,effect:"leftLoop",autoPlay:true,vis:3,delayTime:1000});
|
到这里一个左右自动滚动带导航的图片展示就完成了，js需要去写的很简单，就是切换元素的包裹层对象的父元素（目标元素的父元素）去调用slider函数，函数带有一个对象参数，mainCell—切换元素的包裹层对象（切换的元素–目标元素），autopage–是否启动自动分页，effect—切换的效果，autoplay—是否自动切换，vis—visible缩写，mainCell的可视范围个数，当实际内容个数少于可视个数的时候，不执行SuperSlide效果，delaytime—-毫秒；切换效果持续时间（一次切换效果执行所用的时间长度）；
这里只是很简单的应用很分析，里面还有很多参数，可以对照demo去自己玩玩。
总之，这个插件可以很好的解决pc端切换类的特效，而移动端我一般是用swiper.js。当然插件或者轮子的使用要以业务场景作为基础，要不然再炫酷的轮子也是不适合的。
end.