zoukankan      html  css  js  c++  java
  • Ideal-image-slider 幻灯片实例演示

    链接: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>
  • 相关阅读:
    HashSet源码分析
    Mysql的体系结构和存储引擎
    触发器
    存储过程和函数
    索引
    SpringBoot 中的日志使用
    log4j2
    Logback
    slf4j
    日志门面
  • 原文地址:https://www.cnblogs.com/wuheng1991/p/5752015.html
Copyright © 2011-2022 走看看