图片轮播插件比较（jquerySlide与superSlide）
做图片轮播一直采用的是SuperSlide：
<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则能很好地解决这个问题：
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/27874907@N04/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 })具体的宽高数值不会产生影响。
