有两种应用方式：

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的更多相关文章

  1. 轮播插件、原生js编写，弄懂这个，基本上各种轮播都可以自己写了

    直接上代码了: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  2. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  3. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  4. swipe轮播插件零基础实用

    此篇博客整理了常用的轮播效果,适用于所有开发人员 swipe是当下相对而言较好用的轮播插件,下面是博主整理的demo源代码,可直接上手(备注:需自己手动swipe所需的j和css) 此段代码总共是有三 ...

  5. 推荐:图片轮播插件Nivo Slider

          因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的.        ...

  6. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  7. 图片轮播插件-carouFredSel

    carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...

  8. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  9. 图片轮播插件Nivo Slider

    推荐:图片轮播插件Nivo Slider         因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...

随机推荐

  1. Elasticsearch学习概念之curl

    curl,简单认为是可以在命令行下访问url的一个工具.即增删改查. curl是利用URL语法在命令行方式下工作的开源文件传输工具,使用curl可以简单实现常见的get/post请求. 查看curl的 ...

  2. Silverlight 5 系列学习之二

    昨天学习了一下Silverlight基础感觉也没有什么特别之处,不过圈里朋友劝我不要深入学习了,因为ms已不再爱他的这个孩子了,好吧那就把上些简单的东西稍微过一下吧,要不然公司有什么需求要改的小弟不会 ...

  3. Selenium实战脚本集—新浪微博发送QQ每日焦点

    Selenium实战脚本集-新浪微博发送QQ每日焦点 http://www.spasvo.com/ceshi/open/kygncsgj/Selenium/201549150822.html 背景 很 ...

  4. CF-828B

    B. Black Square time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  5. F - 棋盘问题

    F - 棋盘问题 Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & %I64u Submit Sta ...

  6. The web.config file for this project is missing the required DirectRequestModule.

    The web.config file for this project is missing the required DirectRequestModule.   将应用程序集的模式由集成改为经典 ...

  7. HDU - 6341 多校4 Let Sudoku Rotate（状压dfs）

    Problem J. Let Sudoku Rotate Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K ...

  8. zookeeper原理与实践(一）----zookeeper的基本功能

    我们现在围绕两个问题来学习zookeeper: 什么是zookeeper? zookeeper基础知识 什么是zookeeper: zookeeper是hadoop下面的一个子项目,是一个分布式协调服 ...

  9. 在windows IIS服务商配置asp.net core的服务器坏境，并部署

    翻译自https://docs.microsoft.com/en-us/aspnet/core/publishing/iis 另一篇参考的文章 http://www.c-sharpcorner.com ...

  10. Django模板语言，过滤器整理

    Django模板语言,过滤器整理 1. add {{ value|add:"2" }} 把add后的参数加给value: 处理时,过滤器首先会强制把两个值转换成Int类型. 如果强 ...