Ideal-image-slider 幻灯片

徐承载
2023-12-01

在线实例

实例演示 默认效果

实例演示 淡入淡出

实例演示 带链接

实例演示 项目导航

实例演示 带标题描述

实例演示 回调函数

实例演示 自定义切换

使用方法

  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>
复制

 

转载于:https://www.cnblogs.com/niuboren/p/5751809.html

 类似资料: