jQuery仿京东手机商城点击查看更多图片代码
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>
- 刺猬QQ交流群号多少?
- 363432
- 刺猬官方有技术支持吗?
- 有的,但技术支持是有偿服务哦,咨询右下角的在线客服吧!
- 下载的资源不能使用怎么办?
- 如果在本站下载的资源不能使用,一经确认可以联系在线客服退款。