jQuery+swiper.js带标签图片视差滚动切换代码

来源:https://www.sucaihuo.com/js/3435.html 2018-01-31 17:13浏览(1420) 收藏

jQuery+swiper.js带标签图片视差滚动切换代码,左右箭头按钮控制两层图片横向滚动轮播。效果非常不错,本例宽度较窄,改成通栏banner更显大气。
jQuery+swiper.js带标签图片视差滚动切换代码
分类:图片代码 > 按钮控制 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

//最里层轮播
var mySwiper1 = new Swiper('#swiper1',{
		loop: true,
		autoplay : 2500,
		speed : 600,
		autoplayDisableOnInteraction : false
	});

//上层轮播
var mySwiper2 = new Swiper('#swiper2',{
		loop: true,
		autoplay : 2500,
		speed : 600,
		slidesPerView :2,
		autoplayDisableOnInteraction : false
  });


//前进后退按钮
$(".left").click(function(){
	mySwiper1.slidePrev();
	mySwiper2.slidePrev();
})
$(".right").click(function(){
	mySwiper1.slideNext();
	mySwiper2.slideNext();
})

</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2