有两种应用方式：

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. ajax方法data参数用法的总结

    源文件分析: data的传递格式有两种:一是url字符串格式:一种是Json格式,格式分别如上 区别是:当传递的参数中包含 特殊字符如:&时,服务器解析这个参数时就会出错,而必须用encode ...

  2. Biopython常用功能模块

    Biopython项目是旨在减少计算生物学中代码重复的开源项目之一,由国际开发人员协会创建. 它包含表示生物序列和序列注释的类,并且能够读取和写入各种文件格式(FASTA,FASTQ,GenBank和 ...

  3. 猜socklen_t的原型

    编写tcp时碰到这个类型,感觉他就是int型. 百度了一下: typedef int socklen_t typedef int ssize_t 我去/usr/include 下grep -r soc ...

  4. 7.20实习培训日志-Java基础程序设计结构

    Java基础程序设计结构 在 Math 类中,为了达到最快的性能,所有的方法都使用计算机浮点单元中的例程,如果得到一个完全可预测的结果比运行速度更重要的话,那么就应该使用StrictMath类,它使用 ...

  5. Linux 错误集锦

    1. CentOS 7 运行yum时出现/var/run/yum.pid已被锁定,PID为xxxx的另一个程序正在运行的问题解决 解决办法: rm -f /var/run/yum.pid,删除文件后再 ...

  6. 苦逼三流小公司程序员这半年找工作经历(3)——选择offer

    本文按照企业规模.性质.规模,分成三类,点评一下遇到的这些公司.也算是为半年找工作经历的一个总结. 1,三流小公司 公司规模类似于笔者跳槽前所在企业,性质有外商独资.合资,当然大多数都是民营企业,规模 ...

  7. c#封装dll

    https://www.cnblogs.com/xingboy/p/10287425.html

  8. Kbengine

    Kbengine 编辑 KBEngine是一款开源的游戏服务端引擎,使用简单的约定协议就能够使客户端与服务端进行交互, 使用KBEngine插件能够快速与(Unity3D, OGRE, Cocos2d ...

  9. JQuery Easyui/TopJUI 创建多级联动下拉框（纯HTML实现！！！）

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...

  10. jQuery EasyUI/TopJUI基本的数字输入框（保留两位小数，带前缀后缀...）

    jQuery EasyUI/TopJUI基本的数字输入框(保留两位小数,带前缀后缀...) numberbox(数值输入框) HTML required:必填字段,默认为false:prompt:显示 ...