注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码

充值

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

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2022-04-25
jQuery仿京东手机商城点击查看更多图片代码
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>