Question

我有一个单页面有一个CSS Marquee效果（简单过渡）和一个CSS Image滑块（carousel）：

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
    x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block"; 
    setTimeout(carousel, 5000);
}

字幕文字：

<div class="marqueeUp" style="font-size: 15pt;">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<br /><br />
- - - - - - - - - - - -
<br /><br />
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>

选框效果：

.marqueeUp {
    position: absolute;
    width: 95%;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    height: 430px;
    -moz-transform:translateY(100%);
    -webkit-transform:translateY(100%); 
    transform:translateY(100%);
    /* Apply animation to this element */   
    -moz-animation: marqueeUp 25s linear infinite;
    -webkit-animation: marqueeUp 25s linear infinite;
    animation: marqueeUp 25s linear infinite;
}

@-moz-keyframes marqueeUp {
    0%   { -moz-transform: translateY(100%); }
    100% { -moz-transform: translateY(-100%); }
}

@-webkit-keyframes marqueeUp {
    0%   { -webkit-transform: translateY(100%); }
    100% { -webkit-transform: translateY(-100%); }
}

@keyframes marqueeUp {
    0%   { 
      -moz-transform: translateY(100%); /* Firefox bug fix */
      -webkit-transform: translateY(100%); /* Firefox bug fix */
      transform: translateY(100%);      
    }
    100% { 
      -moz-transform: translateY(-100%); /* Firefox bug fix */
      -webkit-transform: translateY(-100%); /* Firefox bug fix */
      transform: translateY(-100%); 
    }
}

事情就是每当图像发生变化时，字幕中的文字就会卡住并且滞后很多。有没有办法创建平滑的图像更改或字幕移动？或任何方式使这件事顺利工作，没有滞后.. 试图使用较少分辨率的图像，它没有帮助。

Answer 1

我认为问题出在 Carousel 函数中，我会这样做：

window.carousel = function(time) {
    var self = this;
    this.run = function() {
        //hide current slide
        self.slides[self.currentSlide].style.display = "none";
        self.currentSlide++;
        if (self.currentSlide >= self.slidesCount) {
            self.currentSlide = 0
        }
        self.slides[self.currentSlide].style.display = "block";
        setTimeout(self.run, self.time);
    };
    this.init = function(time) {
        self.time = time || 5000;
        self.currentSlide = 0;
        self.slides = document.getElementsByClassName("ts-slide");
        self.slidesCount = this.slides.length;
        //There's no point in having a slider with one or no slides
        if (self.slidesCount < 2) {
            console.warning("No animation");
            return false;
        }
        //Hide all slides but first
        for (var i = 1; i < this.slidesCount; i++) {
            self.slides[i].style.display = "none";
        }
        setTimeout(self.run, self.time);
    }(time);
};

window.carousel(5000);

工作小提琴==＆gt; https://jsfiddle.net/a8vrs029/

CSS / jQuery Slider减慢整个页面和选框

1 个答案: