使用unslider图片轮播

缺乏、安全感 2022-07-12 12:39 198阅读 0赞

<style>
    ul, ol {padding:0;}
    .banner {position:relative;overflow:auto;text-align:center;}
    .banner li {list-style: none;}
    .banner ul li {float: left;}
    .dots{position:absolute;bottom:10px;left:0;right:0;}  
    .dot{
        display:inline-block;  
        width:10px;  
        height:10px;  
        font-size:0px;  
        line-height:0px;  
        margin-right:12px;  
        cursor:pointer;  
        background-color:#fff;  
        border-radius:8px;  
    }  
    .dot.active{background-color: #cce8cf;}  
    </style>
    
    
    
    
    <div class="banner" id="b02">
        <ul>
            <li><img src="01.jpg" alt="" width="640" height="480" ></li>
            <li><img src="02.jpg" alt="" width="640" height="480" ></li>
            <li><img src="03.jpg" alt="" width="640" height="480" ></li>
            <li><img src="04.jpg" alt="" width="640" height="480" ></li>
            <li><img src="05.jpg" alt="" width="640" height="480" ></li>
        </ul>
    </div>
    
    
    
    <script src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="${base}/static/lib/unslider/unslider.min.js"></script>
    //图片轮播
     $('.banner').unslider({
          delay: 2000,
          dots: true,
          fluid: true
    });

更多参考 [unslider演示][unslider]

[unslider]: http://www.jq22.com/yanshi1940

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关图片轮播

不管前端技术如何日新月异，有的需求总是不变的，比如图片轮播那么如何实现呢？ biubiu~思路来了！首先，我们理一下需求：界面上每次展示一张图片，间隔一段时间候展

迈不过友情╰/ 2022年09月28日 13:03/ 0 赞/ 220 阅读

相关图片轮播框架的使用

> 由于项目中用到图片轮播，在github上找到一个不错的选择，具体使用看下面首先 compile 'com.jude:rollviewpager:1.2.9

红太狼/ 2022年07月15日 13:08/ 0 赞/ 154 阅读

相关使用unslider图片轮播

<style> ul, ol {padding:0;} .banner {position:

缺乏、安全感/ 2022年07月12日 12:39/ 0 赞/ 199 阅读

相关 unslider图片轮播插件初体验（二）

在上一篇文章中我大概介绍了unslider的基本特性和用法，并实现了一个简单的图片轮播特效。那么，在这一章上，我就继续完善上一章我们做的图片轮播，给它加上图片，底部圆点导

本是古典何须时尚/ 2022年06月18日 12:45/ 0 赞/ 197 阅读

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

前短时间在做一个网页，然后要用到图片轮播，这下头大了，新手一枚，自己又不会写图片轮播，即使写出来也是很糟糕，不好维护的。怎么办呢，百度咯。。。。！于是我找到了一个JQuery的

傷城~/ 2022年06月18日 11:47/ 0 赞/ 193 阅读

相关 jquery-unslider轮播图

<!doctype html> <html> <head> <meta charset="utf-8">

小咪咪/ 2022年06月08日 10:27/ 0 赞/ 208 阅读

相关图片轮播

页面代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

素颜马尾好姑娘i/ 2022年04月03日 13:28/ 0 赞/ 300 阅读

相关轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播

空话就不多说了，开始。。。简略经常使用的图片轮播，新闻轮播，焦点新闻轮播,空话不说，贴代码，代码简略易懂，非插件，欢迎留言啊，有什么问题可以指出来,效果图如下 ![轮播和

川长思鸟来/ 2022年03月31日 02:12/ 0 赞/ 425 阅读

相关图片轮播

<div id="wai"> <div id="wai_a1"> <img class="img" src="../图片/张掖丹霞7.j

Bertha 。/ 2021年12月23日 09:25/ 0 赞/ 373 阅读

相关图片轮播

实现简单的图片轮播预览效果图： ![图片1][1] ![图片2][2] ![图片3，3个图片能够自动切换][3_3] 代码： <%@ pa

快来打我*/ 2021年12月01日 13:34/ 0 赞/ 441 阅读