flexslider制作支付宝2013版幻灯片jquery特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 flexslider制作支付宝2013版幻灯片jquery特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>flexslider制作支付宝2013版幻灯片</title>
<style>
* { margin: 0; padding: 0;}
.flexslider { position: relative; height: 400px; overflow: hidden; background: url(images/loading.gif) 50% no-repeat;}
.slides { position: relative; z-index: 1;}
.slides li { height: 400px;}
.flex-control-nav { position: absolute; bottom: 10px; z-index: 2; width: 100%; text-align: center;}
.flex-control-nav li { display: inline-block; width: 14px; height: 14px; margin: 0 5px; *display: inline; zoom: 1;}
.flex-control-nav a { display: inline-block; width: 14px; height: 14px; line-height: 40px; overflow: hidden; background: url(images/dot.png) right 0 no-repeat; cursor: pointer;}
.flex-control-nav .flex-active { background-position: 0 0;}
</style>
</head>

<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">用FlexSlider制作支付宝2013版幻灯片演示</h1>

<div class="flexslider">
	<ul class="slides">
		<li style="background: url(images/img1.jpg) 50% 0 no-repeat;"></li>
		<li style="background: url(images/img2.jpg) 50% 0 no-repeat;"></li>
		<li style="background: url(images/img3.jpg) 50% 0 no-repeat;"></li>
		<li style="background: url(images/img4.jpg) 50% 0 no-repeat;"></li>
		<li style="background: url(images/img5.jpg) 50% 0 no-repeat;"></li>
	</ul>
</div>



<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
	$('.flexslider').flexslider({
		directionNav: false,
		pauseOnAction: false
	});
});
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)