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


jQuery.flexslider带缩略图片滚动特效效果代码
jQuery.flexslider带缩略图片滚动特效效果代码以及带缩略图片滚动等js/jquery网页特效代码下载。

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>

相关推荐

  • jquery图片切换带缩略图片滚动切换

    jquery图片切换带缩略图片滚动切换以及jquery、图片切换、带缩略图片、滚动切换等js/jquery网页特效代码下载。

    Border circle 石神千空 2019-12-17 18:33:27 0 0 0

发表评论

相关文章