欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-28 17:02:05
...

在线实例

实例演示 默认效果

实例演示 淡入淡出

实例演示 带链接

实例演示 项目导航

实例演示 带标题描述

实例演示 回调函数

实例演示 自定义切换

使用方法

  1. <div class="demo">
  2.     <div id="slider">
  3.         <img src="/api/jq/5733e32bf23bb/img/1.jpg" data-src-2x="/api/jq/5733e32bf23bb//img/1@2x.jpg" alt="">
  4.         <img data-src="/api/jq/5733e32bf23bb/img/2.jpg" data-src-2x="/api/jq/5733e32bf23bb//img/2@2x.jpg" alt="">
  5.         <img data-src="/api/jq/5733e32bf23bb/img/3.jpg" data-src-2x="/api/jq/5733e32bf23bb//img/3@2x.jpg" alt="">
  6.         <img data-src="/api/jq/5733e32bf23bb/img/4.jpg" data-src-2x="/api/jq/5733e32bf23bb//img/4@2x.jpg" alt="">
  7.     </div>
  8. </div>
  9. <script src="/api/jq/5733e32bf23bb/js/ideal-image-slider.min.js"></script>
  10. <script src="/api/jq/5733e32bf23bb/extensions/bullet-nav/iis-bullet-nav.js"></script>
  11. <script>
  12. var slider = new IdealImageSlider.Slider('#slider');
  13. slider.addBulletNav();
  14. slider.start();
  15. </script>
复制