第一次写这样的博客。真是不会写。效果什么的对很多人来说肯定觉得很简单,仅用来记录自己解惑过程,谢谢!
拿到这套模板设计图,先整体构思了一下大致要使用到的动效、js,布局打算怎么布,js效果打算用哪种方式实现,最后开始创建页面。。。最开始打算使用swiper,layer,fullpage等来实现这个效果(感觉有点不方便),后来才发现自己想复杂了。浪费了一定时间
html 代码部分:
<!-- tp-commerce --> <div class="tp-commerce page-content"> <div class="page"></div> <div class="page"></div> <div class="page"></div> <div class="page"></div> <div class="page"></div> </div> <!-- tp-commerce end -->
<!-- 箭头 --> <div id="arrow-left"> <div id="arrow-left-height"></div> </div> <div id="arrow-right"> <div id="arrow-right-height"></div> </div> <!-- 箭头 end -->
以上是大概的html布局!
点击切换页面js部分:
<script type="text/javascript"> $(function(){ zlSwiper(); }); function zlSwiper(){ var $obj = $('.tp-commerce>.page'); var len = $obj.length; var i = 0; $("#arrow-right").click(function(){ i++; if(i==len){ alert('到底了'); i = i-1; } $obj.stop(true,true).hide().eq(i).fadeIn(600); return false; }); $("#arrow-left").click(function(){ i--; if(i==-1){ alert('到头了'); i = i+1; } $obj.stop(true,true).hide().eq(i).fadeIn(600); return false; }); } </script>