unslider 轮播插件

新项目中需要使用到图片轮播，找了找插件unslider比较合心意

然后在网上找了许多例子，然而这些例子使用的版本好像不是最新的2.0版本所以代码无法正常使用

于是跑到官网去一通乱找（汗，英语不好是硬伤呀），这里总结一下简单的用法，更多的内容大家可以去官网看看 http://unslider.com/

大神勿喷

/* 引入js和css文件 */

    <link href="Scripts/unslider/css/unslider-dots.css" rel="stylesheet" />
    <link href="Scripts/unslider/css/unslider.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/unslider/js/unslider-min.js"></script>

这里为了样式好看和满足自己的需求需要自己修改一些css样式，比如修改.unslider-nav，让导航滑块位于滑动区域内部

/* css代码 */
<style>
        body {
            margin: 0;
        }

        .banner {
            position: relative;
            overflow: hidden;
        }

        .bg {
            width: 100%;
            height: 666px;
            background-position: center top;
            background-repeat: no-repeat;
            display: block;
        }

        .unslider-nav {
            bottom: 25px;
            position: absolute;
            left: 0;
            right: 0;
        }

            .unslider-nav ol li {
                text-indent: inherit;
                width: 20px;
                height: 20px;
                color: #DE1178;
                font-weight: bold;
                border-radius: 50%;
                text-align: center;
                font-size: 13px;
                line-height: 20px;
            }
    </style>

如果你只需要一个简单图片轮播那个使用简单配置就可以了，更多配置可以让你可以更好的操控你的轮播，这里我没有使用到 arrows 有需要的可以去官网看看

/* js代码 */
<script>

        /* 简单配置 */
        //$(function () {
        //    var unslider = $(‘.banner‘).unslider({
        //        animation: ‘horizontal‘,//滚动模式：垂直
        //        autoplay: true,   //自动滚动
        //        infinite: true,   //无限循环
        //        arrows: false,    //next|prve 箭头
        //        delay: 3000 //滚动速度
        //    });
        //});

        $(function () {
            var unslider = $(‘.banner‘).unslider({
                animation: ‘horizontal‘,//滚动模式，horizontal：由左向右滚动，vertical：由上向下滚动，fade：淡出淡入，默认：horizontal
                autoplay: true,   //自动滚动
                infinite: true,   //无限循环
                arrows: false,    //next|prve 箭头，默认：true
                delay: 3000,      //滚动时间间隔
                speed: 750,       // 滚动速度
                //nav: true,         // 导航滑块,默认：true
                nav: function (index, label) { return Nav(index, label) }, //自定义导航滑块,这个需要修改.unslider-nav ol li 样式
                index: 0,   //开始位置first或last，默认：first
                keys: true,        // 是否支持键盘控制，默认：true
            });
        });
        function Nav(index, label) {
            /* 如果返回文字 */
            if (index == 0) return ‘壹‘;
            else if (index == 1) return ‘贰‘;
            else if (index == 2) return ‘叁‘;
            else if (index == 3) return ‘肆‘;
            else if (index == 4) return ‘伍‘;
            /* 如果返回数字 */
            // return index + 1;
        }
    </script>

/* js代码（简单版） */

$(function () {
        var unslider = $(‘.banner‘).unslider({
            animation: ‘horizontal‘,//滚动模式：垂直
            autoplay: true,   //自动滚动
            infinite: true,   //无限循环
            arrows: false,    //next|prve 箭头
            delay: 3000 //滚动速度
        });
    });

/* html代码 */

    <div class="banner">
        <ul>
            <li class="bg" style="background-image:url(Images/121872903560b1369dc64b4814de7593.jpg)"></li>
            <li class="bg" style="background-image:url(Images/24e2931de5206292d5468e1123e0ca43.jpg)"></li>
            <li class="bg" style="background-image:url(Images/35368855729ed601a90837b3ba7131e1.jpg)"></li>
            <li class="bg" style="background-image:url(Images/466103a685d1ee2eb8020172c50feb52.jpg)"></li>
            <li class="bg" style="background-image:url(Images/acc64092710b0ee253e1c2a881812524.jpg)"></li>
        </ul>
    </div>

/* 附demo */

unslider_demo.rar