master

分支 (1)

管理

管理

master

rotation_chart_swiper__slider
/
example.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example</title>
    <script src="js/jquery.js"></script>
    <script src="js/swiper.jquery.js"></script>
    <link rel="stylesheet" href="css/swiper.css">
</head>
<style>
    body {
        background: #dedede;margin: 100px 0;
    }
    h1 {
        text-align: center;
        padding: 15px;
    }
    table th, table td {
        padding: 15px;
    }
    .example {
        margin: 0 auto;width: 600px;height: 400px;
    }
</style>
<body>

    <!-- 有疑问可以联系作者 QQ:1019664997 -->

    <table border="1" width="600px" cellpadding="15" style="margin: 0 auto" bgcolor="white" style="text-align: center;border-collapse: collapse;padding: 15px;">
        <caption style="font-size: 35px;font-weight: bold;">Parameter</caption>
        <th>参数名</th><th>参数值(默认值可省略)</th>
        <tr><td rowspan="4">type</td><td>scrollX (默认) : 水平滚动</td></tr>
        <tr><td>scrollY : 垂直滚动</td></tr>
        <tr><td>fade : 淡入淡出</td></tr>
        <tr><td>fragment : 碎片翻页</td></tr>
        <tr><td>src</td><td>Array : 传入路径数组</td></tr>
        <tr><td>indicator</td><td>Boolean : 是否开启下方指示器(默认false)</td></tr>
        <tr><td>arrow</td><td>Boolean : 是否开启前后翻页按钮(默认false)</td></tr>
        <tr><td>speed</td><td>Number : 翻页动画速度(默认600)</td></tr>
        <tr><td>autoPlay</td><td>Boolean : 是否开启自动轮播(默认true)</td></tr>
        <tr><td>playSpeed</td><td>Number : 自动播放间隔时间(默认3000毫秒)</td></tr>
        <tr><td>fragmentNum</td><td>Number : 碎片翻页中碎片个数(默认4个)</td></tr>
        <tr><td>color</td><td>String : 指示器未选中颜色(默认'white')</td></tr>
        <tr><td>activeColor</td><td>String : 指示器选中颜色(默认'#248BD6')</td></tr>
    </table>
    <h1>scrollX</h1>
    <div id="scrollX" class="example"></div>
    <h1>scrollY</h1>
    <div id="scrollY" class="example"></div>
    <h1>fade</h1>
    <div id="fade" class="example"></div>
    <h1>fragment</h1>
    <div id="fragment" class="example"></div>
</body>
<script>
    $('table tr:odd').css('background', '#dfdfdf')
    scr = [
        'image/apple.jpg',
        'image/banana.jpg',
        'image/mango.jpg',
        'image/pear.jpg',
        'image/watermelon.jpg'
    ]
    $('#scrollX').swiper({
        type: 'scrollX',
        src: scr,
        speed: 400
    })
    $('#scrollY').swiper({
        type: 'scrollY',
        src: scr,
        indicator: true
    })
    $('#fade').swiper({
        type: 'fade',
        src: scr,
        arrow: true
    })
    $('#fragment').swiper({
        type: 'fragment',
        src: scr,
        indicator: true,
        color: 'grey',
        activeColor: 'orange'
    })
</script>
</html>