一个最小的、简单易用的、基于jQuery的滑动或交叉渐变幻灯片，可以从一组图像中动态加载背景。

如何使用它:

1.加载幻灯片.js加载jQuery之后。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/slideshow.min.js"></script>

2.创建一个新的幻灯片放映实例，并指定幻灯片放映所在的容器。

<div class="example" id="demo">
</div>

var slideshow = new Slideshow({
    backgroundElementId: "demo"
});

3.为幻灯片放映定义一组背景图像。

slideshow.setImages(['1.jpg','2.jpg','3.jpg',]);

4.激活背景幻灯片。

slideshow.run();

5.配置动画速度和自动播放间隔。

var slideshow = new Slideshow({
    tickInterval: 5000,
    transitionTime: 800,
    backgroundElementId: "demo"
});

9.使背景图像始终位于容器的中心。

.example {  
  background-position: 50% 50%; 
  background-size: cover;
}

10.设置您想要使用的转换类型。可能的过渡：滑动水平or音量输入输出.

var slideshow = new Slideshow({
    effect: "slideHorizontal"
});

11.回调功能。

var slideshow = new Slideshow({
    onTransition: function(url){},
});

更新日志：

2023-03-30

• 新的配置选项：onTransition回调

2020-06-16

• 生成html id以避免冲突

2019-10-08

• 保留临时层div的原始背景大小css属性

2019-09-18

• 更好的水平滑动操作

预览截图

极简主义背景幻灯片插件 jQuery幻灯片.js