FlexSlider全屏轮播插件

下载 已下载2021次 – 697 kB

制作方法

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