用FlexSlider制作支付宝2013版幻灯片
简介
今天我们介绍如何使用FlexSlider制作支付宝2013幻灯片。
兼容性
兼容所有浏览器，包括 IE6。
制作方法
1、引入文件
<script src="js/jquery.min.js"></script> <script src="js/jquery.flexslider-min.js"></script>
2、HTML
<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>
我们把图片以背景方式显示，因为支付宝的图片很宽，有 2500px，为了让幻灯片在不同尺寸的屏幕都能居中，所以选择背景的方式。支付宝官方也是以背景的方式显示。
3、CSS
* {
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;
}
4、JavaScript
$(window).load(function() {
$('.flexslider').flexslider({
directionNav: false,
pauseOnAction: false
});
});
