cb-slideshowad.js是一个轻量级且功能丰富的jQuery幻灯片放映插件，旨在通过带有附带链接的图像集合进行无限旋转

配备了7种引人入胜的过渡效果，非常适合以迷人的方式展示您的产品、服务、广告、横幅和特色帖子。

如何使用它:

1.下载插件并包含jquery.slideshowad.jsjQuery库之后的脚本。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/dist/jquery.slideshowad.js"></script>

2.将带有链接的图像集合添加到幻灯片放映容器。

<div class="mySlideshow">
  <a href="#">
    <img src="1.jpg">
  </a>
  <img src="2.jpg">
  <a href="#">
    <img src="3.jpg">
  </a>
  <img src="4.jpg">
  <img src="5.jpg">
</div>

3.初始化插件以创建默认幻灯片。

$('.mySlideshow').slideShowAd({
  // options here
});

4.隐藏幻灯片，直到加载所有图像。

.mySlideshow {
  display: none;
}

5.在幻灯片中应用过渡效果。

• “淡入淡出”（默认设置）
• “翻转”
• 'flipX'
• '左侧幻灯片'
• '向右滑动'
• '滑动顶部'
• '滑动底部
• “无”

$('.mySlideshow').slideShowAd({
  slideShowType: 'none',
});

6.配置过渡效果。

$('.mySlideshow').slideShowAd({
  duration: 1000,
  interval: 5000,
});

7.自定义幻灯片的背景颜色。

$('.mySlideshow').slideShowAd({
  backgroundColor: '#f5f5f5',
});

8.确定是否在新的选项卡/窗口中打开链接。

$('.mySlideshow').slideShowAd({
  targetBlank: false,
});

9.更多插件选项。

$('.mySlideshow').slideShowAd({
  width: '',
  height: '',
  zIndex: 999,
});

预览截图

带渐变/滑动/翻转转换 自动幻灯片放映 cb幻灯片放映js