gpt4 book ai didi

jquery - CSS/jQuery Slider 减慢整个页面和字幕

转载 作者:行者123 更新时间:2023-11-28 03:30:44 25 4
gpt4 key购买 nike

我有一个具有 CSS 选框效果(简单过渡)和 CSS 图像 slider (旋转木马)的页面:

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

问题是每次图像发生变化时,字幕中的文本都会卡住并滞后很多。有什么方法可以创建平滑的图像更改或选取框移动?或者有什么方法可以让这个东西顺利无延迟地工作..尝试使用分辨率较低的图像,但没有帮助。

最佳答案

我认为问题出在 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);

工作 fiddle ==> https://jsfiddle.net/a8vrs029/

关于jquery - CSS/jQuery Slider 减慢整个页面和字幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44748787/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com