jquery-unslider轮播图

最新推荐文章于 2022-06-23 16:36:46 发布

Mengzy007

最新推荐文章于 2022-06-23 16:36:46 发布

阅读量579

点赞数

分类专栏： JS插件文章标签： unslider插件轮播图

本文链接：https://blog.csdn.net/Mengzy007/article/details/78062513

版权

JS插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>unslider演示</title>

<script src="jquery-1.11.1.min.js"></script>
<script src="unslider.min.js"></script>

<!-- 写点样式，让轮播好看点 -->
<style>
    ul, ol { padding: 0;}
    .banner { position: relative; overflow: auto; text-align: center;}
    .banner li { list-style: none; }
    .banner ul li { float: left; }
    #carousel { width: 640px;}
    #carousel .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
    #carousel .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;
    }
    #carousel .dots li.active 
    {
        background: #fff;
        opacity: 1;
    }
    #carousel .arrow { position: absolute; top: 200px;}
    #carousel #al { left: 15px;}
    #carousel #ar { right: 15px;}
</style>

</head>

<body>

    <!-- 把要轮播的地方写上来 -->
    <div class="banner" id="carousel">
        <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>

        <!-- 可以点击左右切换 -->
        <!-- <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="20" height="35"></a>
        <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="20" height="37"></a> -->
    </div>

    <!-- 最后用js控制 -->
    <script>
        $(document).ready(function(e) {
             $('#carousel').unslider({
                speed: false,   
                delay: 3000,
                complete: function() {}, 
                keys: false,              
                dots: true,
                fluid: true
            });
        });
    </script>

</body>

</html>

unslider配置参数

speed: 500,     // 动画过渡的速度(毫秒),如果不需要过渡效果就设置为false  
delay: 3000,    // 每张幻灯片的间隔时间(毫秒), 如果不是自动播放就设置为false  
init: 0,        // 初始化延迟时间(毫秒),如果不需要延迟就设置为false  
pause: !f,      // 当鼠标指针浮动在当前区域内时是否暂停自动播放  
loop: !f,       // 是否无尽循环播放  
keys: f,        // 是否开启键盘导航  
dots: f,        // 是否显示导航点  
arrows: f,      // 是否显示向前和向后的箭头  
prev: '←',     // 向前按钮中的显示文字(或html片段)  
next: '→',     // 向后......  
fluid: f,       // 是否宽度自适应  
starting: f,    // 在每个动画前调用的函数  
complete: f,    // 在每个动画之后调用的函数  
items: '>ul',   // 幻灯片的容器选择器  
item: '>li',    // 需要滚动的选择器  
easing: 'swing',// 动画的缓动函数(easing function)  
autoplay: true  // 是否允许自动播放

Mengzy007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-unslider轮播图

<!doctype html><html><head><meta charset="utf-8"><title>unslider演示</title><script src="jquery-1.11.1.min.js"></script><script src="unslider.min.js"></script><style> ul, ol { p
复制链接

扫一扫

专栏目录