有两种应用方式：

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. Process打开文件

    引用:using System.Diagnostics; 打开文件夹: System.Diagnostics.Process.Start(FilePath); 打开文件夹中某个文件: System.D ...

  2. Linux打开防火墙telnet端口

    检查端口情况:netstat -an | grep 22 关闭端口号:iptables -A INPUT -p tcp --drop 端口号-j DROP                    ipt ...

  3. NFS资料

      Linux NFS服务器的安装与配置 http://www.cnblogs.com/mchina/archive/2013/01/03/2840040.html Linux NFS服务器的安装与配 ...

  4. java之二叉树--未完待续

    参考http://how2j.cn/k/collection/collection-tree/476.html#nowhere 二叉树概念 二叉树由各种节点组成二叉树特点:每个节点都可以有左子节点,右 ...

  5. jdbcTemplate简单使用

    package com.bizvane.spider.tools; import org.apache.commons.dbcp.BasicDataSource; import org.springf ...

  6. 使用makefile编译多个文件（.c , .cpp , .h等）

    有时候我们要一次运行多个文件,这时候我们可以使用Makefile!!! ◊make是什么? make是一个命令工具,是一个解释makefile中指令的命令工具.它可以简化编译过程里面所下达的指令,当执 ...

  7. python3 Flask安装

    虚拟环境 建议在开发环境和生产环境下都使用虚拟环境来管理项目的依赖. 为什么要使用虚拟环境?随着你的 Python 项目越来越多,你会发现不同的项目会需要 不同的版本的 Python 库.同一个 Py ...

  8. P1295-创意吃鱼

    题目描述 回到家中的猫猫把三桶鱼全部转移到了她那长方形大池子中,然后开始思考:到底要以何种方法吃鱼呢(猫猫就是这么可爱,吃鱼也要想好吃法 ^_*).她发现,把大池子视为01矩阵(0表示对应位置无鱼,1 ...

  9. python爬虫——web前端基础（3）

    超链接的使用------>>>> 链接的引用使用的是<a>标记. <a>标记的基本语法:<a href="链接地址"   ta ...

  10. transition动画最简使用方式

    HTML <a href="#" title="">test</a> CSS a {display:block; width:200px ...