jQuery仿京东手机商城点击查看更多图片代码

js代码

<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>