改变opacity实现图片轮播

刺骨的言语ヽ痛彻心扉 2022-08-20 10:16 97阅读 0赞

这里实现原理我就不详细述说了，主要是通过改变图片的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; 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);
    
                })
    })