商品详情页的点开大图效果
1.模拟下商品详情页的点击大图效果
2.活动到最后一张继续滑动查看图文详情页
3.为了做出轮播的效果 引入swiper插件
问题1
- 首先可以在商品详情页通过id创建一个swiper，点击进入大图模式后，即在原页面上面添加一个遮罩层，在遮罩层上面通过id创建另一个swiper。此方法的弊端在于，用户点击图片进入大图后，首先显示对应的图片较难实现，因此放弃。
- 那就只创建一个swiper，通过点击事件来切换背景样式，来模拟进入大图。此方法的弊端在于切回商品详情模式时，不利于控制；
- 通过
toggleClass（）来切换进入退出大图模式，代码简洁，弊端在于此方法的点击对象是一个，因此在进入大图模式后只能通过再次点击图片退出大图模式 - 通过分开点击添加删除className
addClass()与removeClass()来控制，只能实现一次进入退出，此后便无法继续添加类名，原因未知。 - 通过添加按钮来退出大图模式。
- 综合考虑，使用第二种方法。
问题2
- 当图片滑动到最后一张时，进入图文详情页，对于我们在实际工作中，为了减少请求次数，往往后台会直接返回一个json数据，里面包含商品详情页的数据，和图文详情的数据，因此通过商品详情页的显示与隐藏来模拟进入详情页
-
swiper有个方法onReachEnd，当图片滚动到最后一张时触发。但是和我们的需求不同，因此需要里面继续添加判断条件。
- html代码
<div class="container" id="container"> <div class="swiper-container Swiper1"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-pagination swiper-pagination1" style="display:inline-block"></div> <div class="test">继续滑动查看图文详情</div> </div> </div>
- js代码
var lll=$('.swiper-slide') var mySwiper = new Swiper('.Swiper1', { pagination : '.swiper-pagination', paginationType : 'bullets', paginationClickable :true, //滑动到最后一页，继续滑动加载图文详情 onReachEnd: function(swiper){ var aa=parseInt($(this).index())//判断当前是否为最后一张 if (aa=-1){ $('.test').css('display','block') setInterval(function(){//通过设置定时器来监测用户的是否继续滑动 var distance=$('.swiper-wrapper').css('transform') var arr=distance.split(",") var width=screen.width*(lll.length-1)+screen.width/4 if(arr[4]<-width){ $('#picDetails1').css('display','block') } },1000) } } }) $('.swiper-slide').on('click',function () { $('.container').addClass('DetailsShade') $('.container section').addClass('ShareHide') $('#closeBig').css('display','block') }); $('#closeBig').on('click',function (){ $('.container').removeClass('DetailsShade'); $('.container section').removeClass('ShareHide') $('#closeBig').css('display','none') })
