码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-08-09 10:38:29      阅读:173      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!