第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() {
		$('#carousel').flexslider({
			animation: "slide",
			controlNav: false,
			animationLoop: false,
			slideshow: false,
			itemWidth: 210,
			itemMargin: 5,
			asNavFor: '#slider'
		});

		$('#slider').flexslider({
			animation: "slide",
			controlNav: false,
			animationLoop: false,
			slideshow: false,
			sync: "#carousel"
		});
	});	
</script>
<style type="text/css">
.flexslider{margin-bottom:5px;}
</style>

HTML

<div id="slider" class="flexslider" style="width:640px;margin-left:110px;">
	<ul class="slides">
		<li><img src="images/sc1.jpg" /></li>
		<li><img src="images/sc2.jpg" /></li>
		<li><img src="images/sc3.jpg" /></li>
		<li><img src="images/sc4.jpg" /></li>
		<li><img src="images/sc5.jpg" /></li>
		<li><img src="images/sc6.jpg" /></li>
		<li><img src="images/sc1.jpg" /></li>
		<li><img src="images/sc2.jpg" /></li>
		<li><img src="images/sc3.jpg" /></li>
		<li><img src="images/sc4.jpg" /></li>
		<li><img src="images/sc5.jpg" /></li>
		<li><img src="images/sc6.jpg" /></li>
	</ul>
</div>
					
<div id="carousel" class="flexslider carousel" style="width:640px;margin-left:110px;">
	<ul class="slides">
		<li><img src="images/sc1.jpg" /></li>
		<li><img src="images/sc2.jpg" /></li>
		<li><img src="images/sc3.jpg" /></li>
		<li><img src="images/sc4.jpg" /></li>
		<li><img src="images/sc5.jpg" /></li>
		<li><img src="images/sc6.jpg" /></li>
		<li><img src="images/sc1.jpg" /></li>
		<li><img src="images/sc2.jpg" /></li>
		<li><img src="images/sc3.jpg" /></li>
		<li><img src="images/sc4.jpg" /></li>
		<li><img src="images/sc5.jpg" /></li>
		<li><img src="images/sc6.jpg" /></li>
	</ul>
</div>