[代码样式]用FlexSlider制作支付宝2013版幻灯片

简介

今天我们介绍如何使用FlexSlider制作支付宝2013幻灯片。

兼容性

兼容所有浏览器，包括 IE6。

制作方法

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.flexslider-min.js"></script>

2、HTML

<div class="flexslider">
    <ul class="slides">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></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
    });
});