jQuery.flexslider带缩略图片滚动特效效果代码

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/flexslider.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>

3. HTML代码

<div class="flexslider" style="width:850px;margin:0 auto;">
	<ul class="slides">
		<li data-thumb="img/slider/1.jpg">
			<img src="img/slider/1.jpg">
			<p class="flex-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur.</p>
		</li>
		<li data-thumb="img/slider/2.jpg">
			<img src="img/slider/2.jpg">
			<p class="flex-caption">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</li>
		<li data-thumb="img/slider/5.jpg">
			<img src="img/slider/5.jpg">
			<p class="flex-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur.</p>
		</li>
		<li data-thumb="img/slider/6.jpg">
			<img src="img/slider/6.jpg">
			<p class="flex-caption">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</li>
	</ul>
</div>
<script type="text/javascript">
$(window).load(function(){
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails"
    });
});
</script>