unslider图片轮播插件初体验（一）

傷城~ 2022-06-18 11:47 195阅读 0赞

前短时间在做一个网页，然后要用到图片轮播，这下头大了，新手一枚，自己又不会写图片轮播，即使写出来也是很糟糕，不好维护的。怎么办呢，百度咯。。。。！于是我找到了一个JQuery的图片轮播插件叫[unslider][]，符合我的项目要求。虽然最后并没有采用，但是仍然有学习的价值。因此写下一篇博客，以后忘记了还可以回来看，也当做在这里储备知识了。  
**提示：**  
***（这里面的知识需要JQuery和Javascript基础，没学过这两个知识点的小伙伴们，建议先去学习这两个知识点后再来看本文章）***

**下面我就开始介绍一下这个框架：**

unslider这个图片轮播框架很小，  
不到3kb，  
支持键盘导航，  
支持响应式布局，  
支持主流浏览器，  
并且支持IE6+，  
（这里由于我没有IE6可以用来测试，支持IE6是别人测试后反馈的额，而我最低只是测试过I8可运行！）

在这里我先给大家提供一个可下载这个插件的网址，大家可以在这里通过这个地址下载插件，也可以自己百度下载。  
[前往下载地址][unslider]

**下面我们可以先看看unslider插件的可用参数：**  
（觉得不全面的，可以自己去下载并查看源代码，在源代码中可以看到更多更加详细的参数）

*代码里都有注释，这里不做解释了*

$('#element').unslider({
            speed: 500,               // 滚动速度
            delay: 2000,              // 动画延迟
    
            complete: function() { },  // 动画完成的回调函数 // 在每个动画之后调用的函数
    
            keys: true,        // 启动键盘导航
            dots: true,         // 显示点导航
            fluid: true,       // 支持响应式设计 // 是否宽度自适应
            loop: true,
            autoplay: true// 是否无尽循环播放
            arrows: f,      // 是否显示向前和向后的箭头
            prev: '←',     // 向前按钮中的显示文字(或html片段)
            next: '→',     // 向后......
            starting: f,    // 在每个动画前调用的函数
            items: '>ul',   // 幻灯片的容器选择器
            item: '>li',    // 需要滚动的选择器
            easing: 'swing',// 动画的缓动函数(easing function)
            autoplay: true  // 是否允许自动播放 
        });

看完unslider插件的参数后，现在要考虑的是怎么使用这个插件？

下面我就先做个最简单的演示，这些演示代码网上都有，也都是大同小异的，可以说基本都是unslider开发者提供的教程代码。

首先我们先在网页的`<head></head>` 标签里导入Jquery和unslider插件  
jquery插件可以自己去百度下载，这里就不多讲了。

<head>
        <meta charset="UTF-8">
        <title>unslider图片轮播</title>
        <script src="jquery包/jquery.js"></script>
        <script src="jquery包/unslider.min.js"></script>
    </head>

接着我们先完成html部分的结构：

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

完成了html结构后，我们还要写点样式：

在这里我大概解释一下这部分的css，首先呢，我们要整体控制好html的整体布局样式，主要是把margin,padding 都清零。

接着写好最外面那层的div样式，高度和宽度都可以自己调，这里的宽度是占满，高度适应li的高度

一定要写的是css属性是position并且要设置为relative;然后还要把溢出盒子的内容给隐藏掉，所以也要写overflow: auto; auto属性值也可以改为hidden。

接着就要去掉无序列表的默认样式 list-style: none;，也就是每个li前面的圆点。然后再把li横向右排列 float: left;

**最后再调用unslider插件就好了**

***提示：*** unslider插件的 JavaScript代码一定要在图片轮播的html代码结构之后调用，放在图片轮播的html代码结构之前会导致找不到相应元素的错误，最终导致轮播无法运行。

**以下是完整代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>unslider图片轮播</title>
        <script src="jquery包/jquery.js"></script>
        <script src="jquery包/unslider.min.js"></script>
        <style type="text/css"> html, body, ul, ol { font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; padding: 0; margin: 0; } .banner { position: relative;overflow: auto; text-align: center;} .banner li { list-style: none; } .banner ul li { float: left; } #b01 ul li { height: 100px;} </style>
    
    </head>
    <body>
    <div class="banner" id="b01">
    
        <ul>
    
            <li>This is a slide.</li>
    
            <li>This is another slide.</li>
    
            <li>This is a final slide.</li>
    
        </ul>
    
    </div>
    
    <script type="text/javascript"> $(document).ready(function(e) { $('#b01').unslider(); }); </script>
    </body>
    </html>

好了，到这里，一个最简单的图片轮播已经完成了。

unslider的更多用法将在下一篇文章中介绍。大家也可以自行百度。

**最后本人再强调一下，本人写文章除了分享知识以外，主要目的是为了给我自己记录一些笔记和经验，所以不喜欢我写的东西的，请勿喷！若你更好的建议或者想法，可以给我留言和我分享，欢迎大牛过来指教！**

**若有雷同，纯属巧合！！！！**

[unslider]: http://www.bootcss.com/p/unslider/