实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
    <head>
4
        <meta charset="utf-8">
5
        <title>JS幻灯片Ideal Image Slider演示-默认效果_shouce</title>
6
        <link rel="stylesheet" href="/api/jq/5733e32bf23bb/css/ideal-image-slider.css">
7
        <link rel="stylesheet" href="/api/jq/5733e32bf23bb/themes/default/default.css">
8
        <style>
9
            .shouce { width: 900px; margin: 0 auto;}
10
            #slider { border-radius: 5px;}
11
        </style>
12
    </head>
13
    <body>
14
        <h1>默认效果</h1>
15
        <div class="shouce">
16
            <div id="slider">
17
                <img src="/api/jq/5733e32bf23bb/img/1.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/1@2x.jpg" alt="">
18
                <img data-src="/api/jq/5733e32bf23bb/img/2.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/2@2x.jpg" alt="">
19
                <img data-src="/api/jq/5733e32bf23bb/img/3.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/3@2x.jpg" alt="">
20
                <img data-src="/api/jq/5733e32bf23bb/img/4.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/4@2x.jpg" alt="">
21
            </div>
22
        </div>
23
        <script src="/api/jq/5733e32bf23bb/js/ideal-image-slider.min.js"></script>
24
        <script>
25
            new IdealImageSlider.Slider('#slider');
26
        </script>
27
    </body>
28
</html>