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 { 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  // 是否允许自动播放 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值