'JS翻页重构'

@@ -13,55 +13,92 @@ $('#close-message').click(function() {
     $('.message-tip').slideUp(200);
     $('.message-tip').slideUp(200);
 });
 });
 
 
+/**
+ *
+ * @param self 点击的控件
+ * @param $ul 列表父
+ * @param page 总共页数
+ * @param itemWith 子元素宽
+ * @param curPage 当前页码
+ * @param num 一页商品数量
+ */
+function pageChange(self, $ul, page, itemWith, curPage, num) {
+    var $this = self,
+        left;
+
+    if ($this.hasClass('next')) {
+
+        //第2页显示前翻按钮
+        if (curPage === 2) {
+            $this.siblings().removeClass('no-visible');
+        }
+
+        //最后一页隐藏后翻按钮
+        if (curPage === page) {
+            $this.addClass('no-visible');
+        }
+    } else {
+
+        //倒数第2页显示后翻按钮
+        if (curPage === page - 1) {
+            $this.siblings().removeClass('no-visible');
+        }
+
+        //第1页隐藏前翻按钮
+        if (curPage === 1) {
+            $this.addClass('no-visible');
+        }
+    }
+
+    left = -num * (curPage - 1) * itemWith;
+
+    $ul.animate({
+        marginLeft: left
+    }, 400);
+}
+
 //新品上架
 //新品上架
 (function() {
 (function() {
     var $naPager = $('.na-pager'),
     var $naPager = $('.na-pager'),
+        $rcPager = $('.rc-pager'),
         $naUl = $('.new-arrival ul'),
         $naUl = $('.new-arrival ul'),
+        $rcUl = $('.recommend ul'),
         naPage = Math.ceil($naUl.children('li').length / 5),
         naPage = Math.ceil($naUl.children('li').length / 5),
+        rcPage = Math.ceil($rcUl.children('li').length / 6),
         naItemWith = $naUl.children('li:last-child').outerWidth(),
         naItemWith = $naUl.children('li:last-child').outerWidth(),
-        naCurPage = 1;
+        rcItemWith = $rcUl.children('li:last-child').outerWidth(),
+        naCurPage = 1,
+        rcCurPage = 1;
 
 
     $naUl.width($naUl.width() * naPage);
     $naUl.width($naUl.width() * naPage);
+    $rcUl.width($rcUl.width() * rcPage);
 
 
     //最新上架翻页
     //最新上架翻页
     $naPager.click(function() {
     $naPager.click(function() {
-        var $this = $(this),
-            left;
-
-        if ($this.hasClass('next')) {
-
-            //后翻
-            ++naCurPage;
-
-            //第2页显示前翻按钮
-            if (naCurPage === 2) {
-                $this.siblings().removeClass('no-visible');
-            }
+        var $this = $(this);
 
 
-            //最后一页隐藏后翻按钮
-            if (naCurPage === naPage) {
-                $this.addClass('no-visible');
+        if (naPage > 1) {
+            if ($this.hasClass('next')) {
+                ++naCurPage;
+            } else {
+                --naCurPage;
             }
             }
-        } else {
+            pageChange($this, $naUl, naPage, naItemWith, naCurPage, 5);
+        }
+    });
 
 
-            //前翻
-            --naCurPage;
+    //为你推荐翻页
+    $rcPager.click(function() {
+        var $this = $(this);
 
 
-            //倒数第2页显示后翻按钮
-            if (naCurPage === naPage - 1) {
-                $this.siblings().removeClass('no-visible');
+        if (rcPage > 1) {
+            if ($this.hasClass('next')) {
+                ++rcCurPage;
+            } else {
+                --rcCurPage;
             }
             }
 
 
-            //第1页隐藏前翻按钮
-            if (naCurPage === 1) {
-                $this.addClass('no-visible');
-            }
+            pageChange($this, $rcUl, rcPage, rcItemWith, rcCurPage, 6);
         }
         }
-
-        left = -5 * (naCurPage - 1) * naItemWith;
-
-        $naUl.animate({
-            marginLeft: left
-        }, 400);
     });
     });
 }());
 }());

@@ -146,8 +146,18 @@
 
 
     .recommend {
     .recommend {
         margin-bottom: 10px;
         margin-bottom: 10px;
+
+        ul {
+            width: 990px;
+        }
+
+        li {
+            width: 106px;
+        }
     }
     }
 
 
+
+
     .ho-btm{
     .ho-btm{
         float: right;
         float: right;
         width: 800px;
         width: 800px;