guang index

@@ -3,14 +3,18 @@
     {{# guang}}
         <div class="left-side">
             <div id="slider" class="slider">
-                <ul>
-                    {{# slider}}
+                <ul class="slide-wrapper">
+                    {{#each slider}}
                         <li>
                             <a href="{{href}}">
-                                <img class="lazy" data-original="{{img}}">
+                                {{#if @first}}
+                                    <img src="{{img}}">
+                                {{^}}
+                                    <img class="lazy" data-original="{{img}}">
+                                {{/if}}
                             </a>
                         </li>
-                    {{/ slider}}
+                    {{/each}}
                 </ul>
             </div>
             <div id="pjax-container" class="msg">

@@ -35,7 +35,7 @@
             <div class="like-comment">
                 <span class="like">
                     <i class="iconfont like-icon{{#if liked}} liked{{/if}}">&#xe626;</i>
-                    <b class="like-num num-{{like}}">(<em class="num">{{like}}</em>)</b>
+                    {{#if like}}<b class="like-num">(<em class="num">{{like}}</em>)</b>{{/if}}
                 </span>
                 <span class="comment">
                     <i class="iconfont">&#xe623;</i>

@@ -26,10 +26,27 @@ var $ = require('yoho.jquery'),
             } else {
                 this._createPage();
             }
+
+            if (this.options.orient) {
+                this._createOrient();
+            }
             this._slideShow();
             this._bindEvent();
             this._autoplay();
         },
+        _createOrient: function() {
+
+            var orientHtml = '<div class="slide-switch">' +
+                    '<a class="prev" href="javascript:;"><span class="iconfont">&#xe60c;</span></a>' +
+                    '<a class="next" href="javascript:;"><span class="iconfont">&#xe60b;</span></a>' +
+                '</div>';
+
+            if (this.$element.find('.slide-switch').length > 0) {
+                return;
+            }
+
+            this.$element.append(orientHtml);
+        },
         _createPage: function() {
             var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' +
                             '<div class="slide-shade"></div><div class="slide-pagination-last">',
@@ -69,6 +86,12 @@ var $ = require('yoho.jquery'),
             }).on('mouseleave', function() {
                 that._autoplay();
             });
+
+            this.$element.on('mouseenter', function() {
+                $(this).find('.slide-switch').addClass('show');
+            }).on('mouseleave', function() {
+                $(this).find('.slide-switch').removeClass('show');
+            });
         },
         _nextSlide: function() {
             if (this.index === this.len - 1) {
@@ -89,12 +112,14 @@ var $ = require('yoho.jquery'),
         _slideShow: function() {
             var $img = this.bigItem.eq(this.index).find('img.lazy');
 
+            //未加载图片的及时显示
             if ($img.attr('src') !== $img.data('original')) {
-                lazyLoad($img.trigger('appear'));
-            }
-            if (this.len > 1) {
-                this.$element.find('.slide-switch').addClass('show');
+                lazyLoad($img, {
+                    event: 'sporty'
+                });
+                $img.trigger('sporty');
             }
+
             this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
             this.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
         },
@@ -124,6 +149,7 @@ var $ = require('yoho.jquery'),
     $.fn.slider.Constructor = Slider;
     $.fn.slider.defaults = {
         time: 5000,
+        orient: true, //左右切换箭头的显示
         pagination: null
     };
 })($);
\ No newline at end of file

 /**
  * 图片移入闪动效果JS
- * @auhor: xuqi(qi.xu@yoho.cn)
+ * @auhor: xuqi<qi.xu@yoho.cn>
  * @date: 2015/7/29
  */
+
 var $ = require('yoho.jquery');
 
-$('.page').on('mouseover', 'a img, a .bg-img', function(e) {
+$('.guang-page').on('mouseover', 'a img, a .bg-img', function(e) {
     var $el = $(e.target);
 
     //slider中的图片不做此效果

@@ -4,22 +4,18 @@
  * @date: 2015/12/15
  */
 
-var $ = require('yoho.jquery'),
-    lazyLoad = require('yoho.lazyload');
+var $ = require('yoho.jquery');
 
 var msg = require('./msg');
 
 require('yoho.pjax');
+require('../common/slider');
 
 require('./img-blink');
 
 require('./right-side');
 
-lazyLoad({
-    failure_limit: 50
-});
-
-msg.dotLazy();
+$('#slider').slider(); //初始化slider
 
 $(document).pjax('.pjax-link, .msg-pager a', '#pjax-container', {
     timeout: 2000

@@ -59,4 +59,6 @@ $('.guang-page').on('click', '.like-icon', function() {
     $(this).closest('.like').toggleClass('hover');
 });
 
+dotLazy();
+
 exports.dotLazy = dotLazy;
\ No newline at end of file

 /**
  * 右侧栏文字截取js
  */
-var $ = require('yoho.jquery');
+var $ = require('yoho.jquery'),
+    lazyLoad = require('yoho.lazyload');
 
 require('yoho.dotdotdot');
 
 $('.ex-reco-context').dotdotdot({
     wrap: 'letter'
-});
\ No newline at end of file
+});
+
+lazyLoad($('.ads img.lazy'));
\ No newline at end of file

 .guang-index-page {
-    .slider {
-        height: 327px;
-        width: 100%;
-        overflow: hidden;
-    }
-
     .msg-nav {
         border-bottom: 1px solid #000;
         margin-top: 24px;
@@ -33,6 +27,7 @@
             }
         }
     }
+
     .msg-pager {
         float: right;
         margin: 20px 0;

@@ -28,7 +28,7 @@
         font-size: 20px;
         font-weight: bold;
     }
-    .ex-recos-list {
+    .ex-reco-list {
         margin-top: 14px;
     }
     .ex-reco-item {
@@ -137,6 +137,11 @@
             height: 80px;
             line-height: 24px;
         }
+
+        .iconfont {
+            color: #ccc;
+        }
+
         .msg-img {
             position: relative;
             float: left;
@@ -240,11 +245,7 @@
             }
             .like {
                 margin-right: 10px;
-                .num-0 {
-                    display: none;
-                }
-
-                &.hover .num {
+                &:hover * {
                     color: #000;
                 }
             }
@@ -271,6 +272,24 @@
         }
     }
 
+    .pager {
+        font-size: 12px;
+        
+        a {
+            height: 24px;
+            padding: 0 9px;
+            line-height: 24px;
+            display: inline-block;
+            text-align: center;
+            margin-right: 8px;
+            color: #222;
+            
+            &.cur {
+                background-color: #222;
+                color: #fff;
+            }
+        }
+    }
 }
 
 @import "home";
\ No newline at end of file

@@ -4,7 +4,8 @@
         "compass/reset",
         "header",
         "footer",
-        "path-nav";
+        "path-nav",
+        "plugin/slider";
 
 body {
     font-family: arial,"Microsoft YaHei"; 

+.slider {
+    position: relative;
+    height: 327px;
+    width: 100%;
+    overflow: hidden;
+
+    img {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}
+
+.slide-pagination {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 12px;
+    text-align: center;
+}
+
+.slide-pagination-inner {
+    display: inline-block;
+    position: relative;
+    padding: 7px;
+    vertical-align: middle;
+}
+
+.slide-shade {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: #000;
+    opacity: 0.3;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
+    @include border-radius(13px);
+}
+
+.slide-pagination-last span {
+    display: block;
+    float: left;
+    position: relative;
+    margin: 0 7px;
+    width: 12px;
+    height: 12px;
+    background: #fff;
+    cursor: pointer;
+    @include opacity(0.6);
+    @include border-radius(6px);
+    z-index: 2;
+
+    &.focus {
+        @include opacity(1);
+    }
+}
+
+.slide-switch {
+    display: none;
+
+    &.show {
+        display: block;
+    }
+
+    a {
+        display: block;
+        position: absolute;
+        top: 50%;
+        margin: -30px 0 0;
+        width: 60px;
+        height: 60px;
+        line-height: 56px;
+        text-align: center;
+        z-index: 2;
+        background: #fff;
+        @include opacity(0.55);
+
+        &:hover{
+            @include opacity(0.9);
+        }
+        
+        .iconfont {
+            font-size: 32px;
+            color: #59585a;
+        }
+    }
+
+    .prev {
+        left: 0;
+    }
+
+    .next {
+        right: 0;
+    }
+}
\ No newline at end of file

@@ -77,9 +77,9 @@ class GuangController extends AbstractAction
                                 'tag' => 'adidas OriginalsQ'
                             )
                         ),
-                        'like' => 0,
-                        'liked' => false,
-                        'comment' => false
+                        'like' => 0, //如果为0，不传
+                        // 'liked' => false,
+                        'comment' => 20
                     )
                 ),
                 'exRecos' => array(