首页

源码搜藏网

首页 > 网页特效 > 焦点图 >

基于slick幻灯片插件制作的一款jQuery背景图片切换效果

创建时间:2016-08-19 15:35  浏览

基于slick幻灯片插件制作的一款jQuery背景图片切换效果
基于slick幻灯片插件制作的一款jQuery背景图片切换效果
在线演示进入下载地址列表

jQuery游戏人物轮播切换效果,基于slick幻灯片插件制作的一款背景图片切换效果。

使用方法:

1、在head区域引入头部4个样式表文件

2、在你的网页中加入注释区域代码

3、人物图片均为PNG透明背景,以实现融合效果。
<!-- js代码开始 -->

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src='js/slick.min.js'></script>
<script type="text/javascript">
(function() {
 
 var slideContainer = $('.slide-container');
 
 slideContainer.slick();
 
 $('.clash-card__image img').hide();
 $('.slick-active').find('.clash-card img').fadeIn(200);
 
 // On before slide change
 slideContainer.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-active').find('.clash-card img').fadeOut(1000);
 });
 
 // On after slide change
 slideContainer.on('afterChange', function(event, slick, currentSlide) {
$('.slick-active').find('.clash-card img').fadeIn(200);
 });
 
})();
</script>
<!-- 代码 结束 -->
上一篇:Material Design风格内容幻灯片代码
下一篇:jQuery全屏banner图片切换焦点图简洁代码

相关内容