轮播插件unslider.min.js使用demo

有两种应用方式：

1、轮播图片作为<img>标签使用

HTML代码：

<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery-1.11.1.min.js"></script>
        <script src="unslider.min.js"></script>
    </head>
    
    <body>
      <!-- example_begin -->
    <h2>示例</h2>

    <div class="banner" id="b04">
        <!--    作为img标签使用    -->
        <ul>
            <li><img src="images/01.jpg" alt="" width="640" height="480"></li>
            <li><img src="images/02.jpg" alt="" width="640" height="480"></li>
            <li><img src="images/03.jpg" alt="" width="640" height="480"></li>
            <li><img src="images/04.jpg" alt="" width="640" height="480"></li>
            <li><img src="images/05.jpg" alt="" width="640" height="480"></li>
        </ul>
        <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="images/arrowl.png" alt="prev" width="20" height="35"></a>
        <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="images/arrowr.png" alt="next" width="20" height="37"></a>
    </div>
    <!-- example_end -->
    </body>
</html>

CSS代码：

html,body {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
ul,ol {
    padding: 0;
}

.banner {
    position: relative;
    overflow: auto;
    text-align: center;
}

.banner li {
    list-style: none;
}

.banner ul li {
    float: left;
}

#b04 {
    width: 640px;
}

#b04 .dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
}

#b04 .dots li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    text-indent: -999em;
    border: 2px solid #fff;
    border-radius: 6px;
    cursor: pointer;
    opacity: .4;
    -webkit-transition: background .5s, opacity .5s;
    -moz-transition: background .5s, opacity .5s;
    transition: background .5s, opacity .5s;
}

#b04 .dots li.active {
    background: #fff;
    opacity: 1;
}

#b04 .arrow {
    position: absolute;
    top: 200px;
}

#b04 #al {
    left: 15px;
}

#b04 #ar {
     right: 15px;
}

JS代码：

$(document).ready(function (e) {
      var unslider04 = $('#b04').unslider({
            dots: true
      }),
      data04 = unslider04.data('unslider');

    $('.unslider-arrow04').click(function () {
        var fn = this.className.split(' ')[1];
        data04[fn]();
      });
});

效果图：

2、轮播图片作为<li>标签背景图片使用

HMTL代码：

<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery-1.11.1.min.js"></script>
        <script src="unslider.min.js"></script>
    </head>
    
    <body>
      <!-- example_begin -->
    <h2>示例</h2>

    <div class="banner" id="b04">
        <!--    作为背景图片使用    -->
        <ul>
            <li id="index_pic1" class="index_pic1"></li>
            <li id="index_pic2" class="index_pic2"></li>
            <li id="index_pic3" class="index_pic3"></li>
            <li id="index_pic4" class="index_pic4"></li>
            <li id="index_pic5" class="index_pic5"></li>
        </ul>
        <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="images/arrowl.png" alt="prev" width="20" height="35"></a>
        <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="images/arrowr.png" alt="next" width="20" height="37"></a>
    </div>
    <!-- example_end -->
    </body>
</html>

CSS代码：在上面CSS的基础上添加以下代码

.index_pic1{
    width: 640px;
    height: 480px;
    margin: 0 auto;
    overflow: hidden;
    background: url(images/01.jpg) no-repeat;
}

.index_pic2{
    width: 640px;
    height: 480px;
    margin: 0 auto;
    overflow: hidden;
    background: url(images/02.jpg) no-repeat;
}

.index_pic3{
    width: 640px;
    height: 480px;
    margin: 0 auto;
    overflow: hidden;
    background: url(images/03.jpg) no-repeat;
}

.index_pic4{
    width: 640px;
    height: 480px;
    margin: 0 auto;
    overflow: hidden;
    background: url(images/04.jpg) no-repeat;
}

.index_pic5{
    width: 640px;
    height: 480px;
    margin: 0 auto;
    overflow: hidden;
    background: url(images/05.jpg) no-repeat;
}

JS代码：与上面的JS代码一致

效果图：

总结：

轮播图片作为img标签时，在显示区域大小固定的情况下适用；在轮播图片需要跟随可视窗口大小自适应的情况下，作为li标签背景更妥当

posted @ 2017-06-15 21:58 Dreamsqin 阅读(1121) 评论(0) 编辑收藏举报

Dreamsqin

轮播插件unslider.min.js使用demo

公告