第39款插件:jquery.flexslider.js带左右箭头且带按钮可滚动的图片插件

多图自适应滑动

JS和CSS

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/flexslider.css" />
<script type="text/javascript">
	$(function() {
		$(".flexslider").flexslider({
			animation: "slide",
			animationLoop: false,
			itemWidth: 210,
			itemMargin: 5,
			minItems: 2,
			maxItems: 4,
			//pausePlay: true
		});
	});	
</script>
<style type="text/css">
.slides li p{height:24px; line-height:24px; text-align:center;font-size:12px;}
</style>

HTML

<div class="flexslider carousel" style="width:640px;margin-left:110px;">
	<ul class="slides">
		<li><img src="images/sc1.jpg" /><p>图片展示1</p></li>
		<li><img src="images/sc2.jpg" /><p>图片展示2</p></li>
		<li><img src="images/sc3.jpg" /><p>图片展示3</p></li>
		<li><img src="images/sc4.jpg" /><p>图片展示4</p></li>
		<li><img src="images/sc5.jpg" /><p>图片展示5</p></li>
		<li><img src="images/sc6.jpg" /><p>图片展示6</p></li>
		<li><img src="images/sc1.jpg" /><p>图片展示7</p></li>
		<li><img src="images/sc2.jpg" /><p>图片展示8</p></li>
		<li><img src="images/sc3.jpg" /><p>图片展示9</p></li>
		<li><img src="images/sc4.jpg" /><p>图片展示10</p></li>
		<li><img src="images/sc5.jpg" /><p>图片展示11</p></li>
		<li><img src="images/sc6.jpg" /><p>图片展示12</p></li>
	</ul>
</div>