多页面点击切换页面

第一次写这样的博客。真是不会写。效果什么的对很多人来说肯定觉得很简单，仅用来记录自己解惑过程，谢谢！

拿到这套模板设计图，先整体构思了一下大致要使用到的动效、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>

jquery.stop()函数解说

其它

获取