這裡實現原理我就不詳細述說了，主要是通過改變圖片的opacity，利用fadeIn和fadeOut來實現過渡效果，使切換不會顯得很突兀。
但是我在這裡遇到了一個問題，讓我糾結了一段時間。問題是，我發現頁面初始化的時候首屏切換並沒有過渡效果，僅僅是直接切換了。我想了很久，以為是我的index的初始值不對，但發現根本不是這個問題。最後，終於發現，原來是我的樣式的問題，我將所有的圖片都設定為display:block;所以首屏切換根本沒有過渡效果，將display改為none就可以了。這個問題很簡單，但是我當時就是一直沒想到。 

還有一個問題是，因為我將包裹圖片的li標籤都設定為絕對定位，所以首屏最開始顯示的是圖片堆疊後的最後一張圖片，我將第一張圖片的z-index設定更大一些便可以了。

完整的原始碼如下：

xml:

<ul class="sl-cont">
    <t t-foreach="images" t-as="image">
        <li class="sl-panel">
            <a t-att-href="image[1]">
                <img t-att-src="image[0]" />
            </a>
        </li>
    </t>
</ul>
<div class="sl-page">
    <a href="javascript:;" class="sl-prev"><</a>
    <a href="javascript:;" class="sl-next">></a>
</div>
 

css:

.sl-cont {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .sl-panel {
        display: none;
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height: 100%;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
        &:first-child {
          display: block;
          z-index: 5;
        }
      }

      .sl-page {
        a{
          position: absolute;
          top:50%;
          width: 28px;
          height: 62px;
          line-height: 62px;
          text-align: center;
          background: rgba(0,0,0,.2);
          color: #fff;
          font-size: 22px;
          font-weight: 400;
          font-family: simsun;
          text-decoration: none;
          z-index: 10;
          margin-top: -31px;
          &:hover {
            text-decoration: none;
          }
        }
        .sl-prev {
          left: 0;
        }
        .sl-next {
          right: 0;
        }
      }
 

js:

$(function() {
            var PicTurn = function(){
                return new PicTurn.prototype.init();
            }

            PicTurn.prototype = {
                init: function(){
                    var self = this;
                    self.$parent = $('.slider-main');
                    self.$btnWrap = $('.sl-nav');
                    self.imgs = self.$parent.find('.sl-panel');
                    self.num = self.imgs.length;
                    self.index = 0;
                    self.timer = setInterval(function(){
                        self.runNext();
                    }, 4000);

                },

                picChange: function(index) {
                    var self = this,
                        i = 0;
                    //self.imgs[index].style.cssText= "display:block;z-index:1;opacity:1;";
                    $(self.imgs[index]).fadeIn(400);
                    self.imgs[index].style.display="block";
                    self.imgs[index].style.zIndex = 1;
                    for(i=0;i<self.num; i++) {
                        if(i !== index) {
                            //self.imgs[i].style.cssText="display:none;z-index:0;opacity:0";
                            $(self.imgs[i]).fadeOut(400);
                            self.imgs[i].style.zIndex = 0;

                        }
                    }
                    //$(self.imgs[index]).fadeIn(400);
                    self.$btnWrap.find('li').eq(index).addClass('sl-item-selected')
                        .siblings().removeClass('sl-item-selected');
                },
                runNext: function() {
                    var self = this;
                    if(self.index >= self.num-1){
                        self.index=0;
                    }else{
                        self.index += 1;
                    }
                    self.picChange(self.index);
                },
                runPre: function() {
                    var self = this;
                    if(self.index == 0) {
                        self.index = self.num-1;
                    }else{
                        self.index -= 1;
                    }
                    self.picChange(self.index);
                }
            }
            PicTurn.prototype.init.prototype = PicTurn.prototype;
            var picTurn = new PicTurn();
            $('.slider-main').on('mouseover', function() {
                    clearInterval(picTurn.timer);
                })
                .on('mouseout', function() {
                    picTurn.timer = setInterval(function(){
                        picTurn.runNext();
                    },4000);
                })
                .on('click','.sl-prev', function() {
                    if(picTurn.timer !== null) {
                        clearInterval(picTurn.timer);
                        picTurn.timer = null;
                    }
                    picTurn.runPre();
                })
                .on('click','.sl-next', function() {
                    if(picTurn.timer !== null) {
                        clearInterval(picTurn.timer);
                        picTurn.timer = null;
                    }
                    picTurn.runNext();
                });
            $('.sl-nav').on('hover', '.sl-item', function() {
                var index = $(this).index();
                picTurn.picChange(index);

            })
})