Ideal-image-slider 幻灯片实例演示

最新推荐文章于 2022-03-09 16:18:03 发布

weixin_33904756

最新推荐文章于 2022-03-09 16:18:03 发布

阅读量101

点赞数

链接：http://zaixianshouce.iteye.com/blog/2316300

http://www.shouce.ren/study/api/s/jq--5733e32bf23bb--index2.html

在线实例

实例演示默认效果

实例演示淡入淡出

实例演示带链接

实例演示项目导航

实例演示带标题描述

实例演示回调函数

实例演示自定义切换

实例：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>JS幻灯片Ideal Image Slider演示-默认效果_shouce</title>
        <link rel="stylesheet" href="/api/jq/5733e32bf23bb/css/ideal-image-slider.css">
        <link rel="stylesheet" href="/api/jq/5733e32bf23bb/themes/default/default.css">
        <style>
            .shouce { width: 900px; margin: 0 auto;}
            #slider { border-radius: 5px;}
        </style>
    </head>
    <body>
        <h1>默认效果</h1>
        <div class="shouce">
            <div id="slider">
                <img src="/api/jq/5733e32bf23bb/img/1.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/1@2x.jpg" alt="">
                <img data-src="/api/jq/5733e32bf23bb/img/2.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/2@2x.jpg" alt="">
                <img data-src="/api/jq/5733e32bf23bb/img/3.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/3@2x.jpg" alt="">
                <img data-src="/api/jq/5733e32bf23bb/img/4.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/4@2x.jpg" alt="">
            </div>
        </div>
        <script src="/api/jq/5733e32bf23bb/js/ideal-image-slider.min.js"></script>
        <script>
            new IdealImageSlider.Slider('#slider');
        </script>
    </body>
</html>