做圖片輪播一直采用的是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 })具體的寬高數值不會產生影響。