jquery-unslider轮播图



<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>

        
        
    div>

    
    <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  // 是否允许自动播放 

你可能感兴趣的:(JS插件)