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>
  • 相关阅读:
    Java 书籍 Top 10
    maven学习笔记
    Extjs study
    初学spring mvc
    spring context:componentscan (转)
    What is AspectJ(转)
    java concurrency 学习
    (转)深入浅出REST
    icloud不用翻就能显示地图的办法(转)
    OSGi知识
  • 原文地址:https://www.cnblogs.com/wuheng1991/p/5752015.html
Copyright © 2011-2022 走看看