图片轮播插件比较（jquerySlide与superSlide）

Posted 2020-07-21 细雨流光

做图片轮播一直采用的是SuperSlide：

http://www.superslide2.com/

<div id="slideBox" class="slideBox">
　　<div class="hd">
　　　　<ul><li>1</li><li>2</li><li>3</li></ul>
　　</div>
　　<div class="bd">
　　　　<ul>
　　　　　　<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></li>
　　　　　　<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></li>
　　　　　　<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></li>
　　　　</ul>
　　</div>

　　<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
　　<a class="prev" href="javascript:void(0)"></a>
　　<a class="next" href="javascript:void(0)"></a>

</div>

<script type="text/javascript">
　　jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true,effect:"leftLoop",delayTime:1000});
</script>

优点是兼容包括ie6的绝大部分浏览器，可通过将.slideBox及.slideBox .bd img的宽度设为100%，高度不设置来实现自适应。缺点是该控件时间较久，未考虑到移动端的情况，不支持手滑功能。

而基于jquery的插件SlidesJS则能很好地解决这个问题：

http://slidesjs.com/

SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions. 

responsive、touch、css3很令人激动有木有？时尚、先进、好用！特别是在手机端手滑效果爽呆了，这为我们更好地用h5伪装原生app做出一大贡献。

参数和运用都比较简单：

css部分：

<!-- SlidesJS Required: These styles are required if you‘d like a responsive slideshow -->
<style>
#slides {
display: none
}

.container {
width: 100%;
margin: 0 auto
}

</style>

html部分：

<!-- SlidesJS Required: -->

<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
　　<div id="slides">
　　　　<img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
　　　　<img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
　　　　<img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/[email protected]/4833059991/">
　　　　<img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
　　　　<a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
　　　　<a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
　　</div>
</div>
<!-- End SlidesJS Required: Start Slides -->

<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->

<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->

<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->

js部分，初始化插件：
<script>
$(function() {
　　$(‘#slides‘).slidesjs({
　　　　width: 940,
　　　　height: 528,
　　　　navigation: false,
　　　　play: {
　　　　　　active: false,
　　　　　　// [boolean] Generate the play and stop buttons.
　　　　　　// You cannot use your own buttons. Sorry.
　　　　　　effect: "slide",
　　　　　　// [string] Can be either "slide" or "fade".
　　　　　　interval: 5000,
　　　　　　// [number] Time spent on each slide in milliseconds.
　　　　　　auto: true
　　　　}
　　});
});
</script>
<!-- End SlidesJS Required -->

注：container为slide的容器，实际的图片宽度由它来决定，因此我们要自适应，只需对.container设置width: 100%，初始化时设置$(‘#slides‘).slidesjs({width: 940,height: 528 })具体的宽高数值不会产生影响。