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

作者 : 小刺猬 本文共913个字,预计阅读时间需要3分钟 发布时间: 2020-08-4 共439人阅读

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>
VIP免费 永久VIP免费

已有0人支付


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

刺猬QQ交流群号多少?
363432
刺猬官方有技术支持吗?
有的,但技术支持是有偿服务哦,咨询右下角的在线客服吧!
下载的资源不能使用怎么办?
如果在本站下载的资源不能使用,一经确认可以联系在线客服退款。

发表评论

刺猬源码网,累计帮助1000+用户成功建站,为草根创业提供助力!

立即查看 了解详情