首页 > 其他 > 详细

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

时间:2016-08-09 10:38:10      阅读:320      评论:0      收藏:0      [点我收藏+]

链接: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>

 

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

原文:http://www.cnblogs.com/wuheng1991/p/5752015.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!