懒人之家--可能是JS网页特效代码收集最全的懒站!

PC手机端通用的jQuery响应式幻灯片轮播特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-11-10
一款非常不错的PC手机端通用的jQuery响应式幻灯片轮播特效,仿小猪CMS官网首页焦点图幻灯片切换代码。


js代码

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/idangerous.swiper2.7.6.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script>        
var mySwiper = new Swiper ('.swiper-container', {
	pagination: '.pagination',
	paginationClickable :true,
	autoplay : 10000,
	speed:1,

	//autoplayDisableOnInteraction : false,
	
	onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
		swiperAnimateCache(swiper); //隐藏动画元素 
		swiperAnimate(swiper); //初始化完成开始动画
	}, 
	onSlideChangeEnd: function(swiper){ 
	swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	} 
})
  
$('.arrow-left').on('click', function(e){
	e.preventDefault()
	mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
	e.preventDefault()
	mySwiper.swipeNext()
})    
</script>