jQuery手机端点击图片查看更多触屏滑动切换代码

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="js/goods.js" ></script>
<script>
//查找屏幕高度
$("body").css("min-height",document.documentElement.clientHeight)
$(".goodsDetail-picture-cont").css('min-height',$("body").height());
//图片点击 进入更多图片展示
$(".img-cont img").click(function(){
	$(".goodsDetail-picture-cont").css('left','50%');
	//图片数量
	var imgLength	=	$(".swiper-slide").length
	$(".gdp-info-num i").text(imgLength);
})
$(".goodsReturn h2").click(function(){
	$(".goodsDetail-picture-cont").css('left','-100%');
})

//	查看全部图片 滑动数字联动
var mySwiper = new Swiper('.swiper-container', {
	pagination: '.swiper-pagination',
	paginationClickable: true,
	//回调函数  具体查看swiper文档
	onSlideChangeStart: function(swiper){
		//因index是从0开始  所以+1
		$(".gdp-info-num span").text(swiper.activeIndex+1);
   }
});
</script>