轮播插件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="data:images/01.jpg" alt="" width="640" height="480"></li>

            <li><img src="data:images/02.jpg" alt="" width="640" height="480"></li>

            <li><img src="data:images/03.jpg" alt="" width="640" height="480"></li>

            <li><img src="data:images/04.jpg" alt="" width="640" height="480"></li>

            <li><img src="data: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="data: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="data: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:;

}

.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:;

    right:;

    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:;

}

#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="data: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="data: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标签背景更妥当

巴特西

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

最新文章

热门文章