初学unslider

初学unslider

1.关于unslider下载

　　官方提供的下载页面是http://www.bootcss.com/p/unslider/，但总是进不了下载页面，所以我就查看主页的源码，找到unslider.min.js链接，复制出来下载。

2.我的第一个banner

　　主页的教程是：

　　1.引入jQuery 和 Unslider

　　

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>

　　2.准备HTML代码

<div class="banner">
    <ul>
        <li>This is a slide.</li>
        <li>This is another slide.</li>
        <li>This is a final slide.</li>
    </ul>
</div>

　　3.添加样式

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }

　　4.调用unslider

$(function() {
    $('.banner').unslider();
});

 

 　　按照这个步骤我发现有一点小小的问题：在页面上什么也看不到，打开firebug能够看到确实是在滑动，我觉得是样式的问题，所以我把样式修改了一下，我把.banner加了一个背景色，又给下面的li标签也加了一个背景色和高度好让里面的字显示出来，这样分层也能很好地看出来，于是就变成了这样：

.banner {
    position: relative;
    overflow: auto;
    background: #00f;
}

.banner li {
    list-style: none;
}

.banner ul li {
    float: left;
    height: 200px;
    background: #f00;
}

　　这样一改，.banner的背景变成了蓝色，li标签的背景变成了红色，还有一点分层的效果，字也能很清楚地看到。这样第一个banner效果就完成。

3.添加一些其他功能

　　当然，强大的unslider可不止这一点，接下来我要给banner下面加一个导航圆点。

　　我们在调用unslider的JS里面加入参数{dots: true}，即需要导航，在浏览器中用firebug可以看到自动为banner加了一个叫has-dots的类，并且在ul标签后面加了一个ol标签，这个ol标签就是导航的结构，这些都是unslider的JS自动完成的，并不能在HTML源码里看到，接下来我们在firebug里找到和导航有关的类有.dots,.dot,.active，这样就去为这些类添加一些样式：

 

.dots {
    position: absolute;
    width: 100%;
    text-align: center;
    right: 0;
    bottom: 20px;
}
.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;
}
.dots li.active {
    background: #fff;
    opacity: 1;
}

 

　　.dots必须要绝对定位，好让他能够浮在图片的上方，给他一个100%的宽度，并且在最右边，然后通过text-align使里面的小圆点居中，距离底部有个20PX距离。每一个小圆点设置一个宽、高和左右距离，再设置一个圆形的边框，就做出了一个小圆点，text-indent可以让里面的字不显示到我们的显示区域里来。最后给一个当前的样式。这样就完成 了小圆点导航。

　　其实小圆点还可以改成其他样式的，比如说方形或长条形，只需要改动他的宽、高和圆角就可以了，也可以更改颜色，或者在里面显示1、2、3这样的数字。

　　接下来是给banner加一个左右箭头的点击事件，自带有一个{arrows: true} ，但是这个很是不好看，我们准备自行弄一个图片，首先不调用原生的箭头，我们在ul标签前面加上：

<a href="javascript:void(0)" class="unslider-arrow prev"></a>
<a href="javascript:void(0)" class="unslider-arrow next"></a>

 

 

 　　这两行代码就是可以点击控制banner的左右滑动的。接下来是要给他们添加样式：

.unslider-arrow {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
    width: 50px;
    z-index: 3;
    opacity: 0.7;
    filter: alpha(opacity=70);
    background-color: #303030;
    background-image: url(../images/unslider-arrow.png);
    background-repeat: no-repeat
}

.prev {
    left: 0px;
    background-position: 0 0
}

.next {
    right: 0px;
    background-position: right 0
}

 

　　同样是要绝对定位，然后距离上下的距离可以调整，左右箭头分开再写一个样式，这个就可以用自己的图片来完成箭头的工作，当然还有最后一步，在JS里面控制他们：

　　var unslider = $('.banner').unslider();
    $('.unslider-arrow').click(function(){
        var fn = this.className.split(' ')[1];
        unslider.data('unslider')[fn]();
    });

 

　　此段代码的意思就是当点击一个箭头时，获取到当前点击箭头的类名，这里只有"unslider-arrow prev"或"unslider-arrow next"，然后把他通过空格转换成数组，再取数组的第二个元素，即为"prev"或"next"

最后其实是调用了unslider的data方法，换个方式看就是：unslider.data('unslider').prev()或unslider.data('unslider').next()即实现左右滑动。

4.总结

　　unslider还有另外一些参数，比如speed,delay,pause,keys,fluid等，可以调整速度，延迟，键盘控制和响应式，总的来说这是一个很不错的banner插件，而且大小不到3KB，非常好用，如果能把他的方法，属性弄清楚将会有很大的帮助。

 

posted on 2015-12-20 12:30 LonelyLee 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonely-lee/p/5060630.html