Ideal-image-slider 幻灯片实例演示
程序员文章站
2022-03-28 17:02:05
...
在线实例
实例演示 默认效果
实例演示 淡入淡出
实例演示 带链接
实例演示 项目导航
实例演示 带标题描述
实例演示 回调函数
实例演示 自定义切换
使用方法
- <div class="demo">
- <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 src="/api/jq/5733e32bf23bb/extensions/bullet-nav/iis-bullet-nav.js"></script>
- <script>
- var slider = new IdealImageSlider.Slider('#slider');
- slider.addBulletNav();
- slider.start();
- </script>
复制