图片切换

@@ -25,6 +25,10 @@
                     </div>
                     <div class="thumb-show right">
                         <img id="main-thumb" src="{{image img 482 643}}" style="display: block;">
+                        <div class="check-btns">
+                            <span class="iconfont pre-thumb">&#xe62c;</span>
+                            <span class="iconfont next-thumb">&#xe629;</span>
+                        </div>
                     </div>
                 </div>
                 <div class="infos left clearfix">

@@ -48,7 +48,7 @@ $searchForm.on('keyup', '#search-key', function(e) {
     var key = $searchKey.val();
 
     if (e.which === 13) {
-        if (key !== '') {
+        if (key) {
             $searchForm.submit();
         }
     } else {

@@ -6,6 +6,9 @@
 var $ = require('yoho-jquery'),
     lazyload = require('yoho-jquery-lazyload');
 
+var $mainThumb = $('#main-thumb'),
+    $checkBtns = $('.check-btns');
+
 var $tradeWrapper = $('.trade-wrapper'),
     $balanceWrapper = $('.balance-wrapper'),
     $thumbWrap = $('.thumb-wrap'),
@@ -15,7 +18,10 @@ var $tradeWrapper = $('.trade-wrapper'),
     $sizeList = $('.size-list'),
     $sizeItem = $('.size-list > li');
 
-var $addToBag = $('#add-to-bag');
+var $addToBag = $('#add-to-bag'),
+    $soldOut = $('#sold-out');
+
+var $thumbCur = $('.thumb-wrap .cur'); // 当前选中展示图片
 
 var SLIDETIME = 200;
 
@@ -25,6 +31,20 @@ require('../common/header');
 
 lazyload($('img.lazy'));
 
+function changeThumb($dom) {
+    var data;
+
+    if ($dom && $dom.length) {
+        $thumbCur = $dom;
+        $dom.addClass('cur').siblings('.cur').removeClass('cur');
+
+        data = $dom.data();
+        if (data.shower) {
+            $mainThumb.attr('src', data.shower);
+        }
+    }
+}
+
 function getBuyProduct() {
     var sku;
 
@@ -42,13 +62,14 @@ function getBuyProduct() {
 }
 
 function chooseColor(index) {
-    var $imgs = $thumbWrap.eq(index).children();
+    var $thumb = $thumbWrap.eq(index),
+        $imgs = $thumb.children();
 
     $thumbWrap.not('.hide').addClass('hide');
-    $sizeList.not('.hide').addClass('hide');
+    $thumb.removeClass('hide');
+    changeThumb($imgs.first());
 
     if (!thumbsLoaded[index]) {
-        // trigger layLoad
         lazyload($imgs, {
             event: 'sporty'
         });
@@ -56,10 +77,38 @@ function chooseColor(index) {
 
         thumbsLoaded[index] = true;
     }
-    $thumbWrap.eq(index).removeClass('hide');
+
+    // 控制左右切换按钮显示与隐藏
+    if ($imgs.length > 1) {
+        $checkBtns.removeClass('hide');
+    } else {
+        $checkBtns.addClass('hide');
+    }
+
+    // 控制才显示对应颜色尺码
+    $sizeList.not('.hide').addClass('hide');
     $sizeList.eq(index).removeClass('hide');
 }
 
+// 展示图
+$thumbWrap.on('mouseenter', '.thumb', function() {
+    changeThumb($(this));
+});
+
+$checkBtns.on('click', '.iconfont', function() {
+    var $dom;
+
+    if ($(this).hasClass('pre-thumb')) {
+        $dom = $thumbCur.prev();
+    } else {
+        $dom = $thumbCur.next();
+    }
+
+    if ($dom.length) {
+        changeThumb($dom);
+    }
+});
+
 // 颜色
 $('.color-list').on('click', '.color-item', function() {
     var $this = $(this),
@@ -73,6 +122,14 @@ $('.color-list').on('click', '.color-item', function() {
 
         // 设置图片及尺码
         chooseColor(index);
+
+        if (+data.total) {
+            $addToBag.removeClass('hide');
+            $soldOut.addClass('hide');
+        } else {
+            $addToBag.addClass('hide');
+            $soldOut.removeClass('hide');
+        }
     }
 });
 

@@ -11,6 +11,38 @@
 
         .thumb {
             margin: 8px 0;
+            cursor: pointer;
+            border: 2px solid #fff;
+        }
+
+        .cur {
+            border-color: #1d1d1d;
+        }
+
+        .thumb-show {
+            position: relative;
+        }
+
+        .check-btns {
+            > * {
+                width: 30px;
+                height: 50px;
+                line-height: 50px;
+                text-align: center;
+                margin-top: -25px;
+                font-size: 20px;
+                color: #fff;
+                background: #1d1d1d;
+                opacity: 0.6;
+                position: absolute;
+                top: 50%;
+                cursor: pointer;
+                user-select: none;
+            }
+
+            .next-thumb {
+                right: 0;
+            }
         }
     }