改变opacity实现图片轮播

这里实现原理我就不详细述说了，主要是通过改变图片的opacity，利用fadeIn和fadeOut来实现过渡效果，使切换不会显得很突兀。
但是我在这里遇到了一个问题，让我纠结了一段时间。问题是，我发现页面初始化的时候首屏切换并没有过渡效果，仅仅是直接切换了。我想了很久，以为是我的index的初始值不对，但发现根本不是这个问题。最后，终于发现，原来是我的样式的问题，我将所有的图片都设置为display:block;所以首屏切换根本没有过渡效果，将display改为none就可以了。这个问题很简单，但是我当时就是一直没想到。 

还有一个问题是，因为我将包裹图片的li标签都设置为绝对定位，所以首屏最开始显示的是图片堆叠后的最后一张图片，我将第一张图片的z-index设置更大一些便可以了。

完整的源码如下：

xml:

    
        

            
                
            
        
    


    <
    >

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-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);

            })
})