有两种应用方式：

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. JDK的windows和Linux版本之下载

    简单说下,Eclipse需要Jdk,MyEclipse有自带的Jdk,除非是版本要求 http://www.oracle.com/technetwork/java/javase/downloads/i ...

  2. 模拟一则ORA-600 [4194][][]故障并处理

    环境:OEL 5.7 + Oracle 11.2.0.3 1.模拟ORA-600 [4194][][]故障 2.使用bbed处理 3.尝试启动数据库 1.模拟ORA-600 [4194][][]故障 ...

  3. append、replace、replaceAll、indexof、lastIndexOf、substring的用法

    1.append StringBuffer buf = new StringBuffer("Hard "): String  aString  =  "Waxworks& ...

  4. 安装mongo可视化管理工具mongo admin

    https://github.com/mrvautin/adminMongo github地址 安装要求下载下来,然后安装即可 中间出现了问题: 说是开了代理,可以关掉代理之后,然后把下载下来的删了, ...

  5. 一个线性表中的元素为整数，设计一个算法，将正整数和负整数分开，使线性表的前一半为负整数，后一半为正整数。（C语言）

    以下为完整可运行示例代码: #include <stdio.h> #include <stdlib.h> typedef struct LNode{ int data; str ...

  6. js根据等号(=)前名称获取参数值

    var GetUrlParam=function (paraName) { var url = document.location.toString(); var arrObj = url.split ...

  7. Codeforces Round 56-C. Mishka and the Last Exam(思维+贪心)

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  8. jQuery基础(3)

    摘要:jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,时间委托(时间代理) 一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.of ...

  9. 040 Combination Sum II 组合总和 II

    给定候选号码数组 (C) 和目标总和数 (T),找出 C 中候选号码总和为 T 的所有唯一组合.C 中的每个数字只能在组合中使用一次.注意:    所有数字(包括目标)都是正整数.    解决方案集不 ...

  10. #1369 : 网络流一·Ford-Fulkerson算法 模板题

    http://hihocoder.com/problemset/problem/1369?sid=1108721 别人都说先学网络流再学二分图,但是我先学了二分图的,感觉网络流好高端啊. 首先对于原图 ...