dowebok

用FlexSlider制作支付宝2013版幻灯片

分类:代码 日期: 点击(14,494) 下载(0) 来源:未知 收藏

用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
    });
});

演 示 下 载

演 示 下 载

标签:

相关文章

下载:用FlexSlider制作支付宝2013版幻灯片
用FlexSlider制作支付宝2013版幻灯片
城通网盘 百度网盘 本地下载

百度网盘密码: