我刚刚制作了具有以下样式的图像幻灯片:
- 几秒钟后移动的图像。
- 一些圆形按钮，当您点击它们时，会转到相应的图像。
- 左右箭头，当您点击它们时，会转到下一张图片。
幻灯片播放正常。 但问题发生在我上网大约 3 分钟后，返回系统选项卡时， slider 移动速度比正常情况快得多。恢复正常的唯一方法是更新页面。
我留下代码看看有没有错误:
HTML:
<!--=====================================
SLIDESHOW
======================================-->
<div class="container-fluid" id="slide">
<div class="row">
<!--=====================================
SLIDESHOW
======================================-->
<ul>
<?php
$servidor = Ruta::ctrRutaServidor();
$slide = ControladorSlide::ctrMostrarSlide();
foreach ($slide as $key => $value) {
$estiloImgProducto = json_decode($value["estiloImgProducto"], true);
$estiloTextoSlide = json_decode($value["estiloTextoSlide"], true);
$titulo1 = json_decode($value["titulo1"], true);
$titulo2 = json_decode($value["titulo2"], true);
$titulo3 = json_decode($value["titulo3"], true);
echo '<li>
<img src="'.$servidor.$value["imgFondo"].'">
<div class="slideOpciones '.$value["tipoSlide"].'">';
if($value["imgProducto"] != ""){
echo '<img class="imgProducto" src="'.$servidor.$value["imgProducto"].'" style="top:'.$estiloImgProducto["top"].'%; right:'.$estiloImgProducto["right"].'%; width:'.$estiloImgProducto["width"].'%; left:'.$estiloImgProducto["left"].'%">';
}
echo '<div class="textosSlide" style="top:'.$estiloTextoSlide["top"].'%; left:'.$estiloTextoSlide["left"].'%; width:'.$estiloTextoSlide["width"].'%; right:'.$estiloTextoSlide["right"].'%">
<h1 style="color:'.$titulo1["color"].'">'.$titulo1["texto"].'</h1>
<h2 style="color:'.$titulo2["color"].'">'.$titulo2["texto"].'</h2>
<h3 style="color:'.$titulo3["color"].'">'.$titulo3["texto"].'</h3>';
if($value["boton"] != ""){
echo '<a href="'.$value["url"].'">
<button class="btn btn-default backColor text-uppercase">
'.$value["boton"].' <span class="fa fa-chevron-right"></span>
</button>
</a>';
}
echo '</div>
</div>
</li>';
}
?>
</ul>
<!--=====================================
PAGINATION
======================================-->
<ol id="paginacion">
<?php
for($i = 1; $i <= count($slide); $i++){
echo '<li item="'.$i.'"><span class="fa fa-circle"></span></li>';
}
?>
</ol>
<!--=====================================
ARROWS
======================================-->
<div class="flechas" id="retroceder"><span class="fa fa-chevron-left"></span></div>
<div class="flechas" id="avanzar"><span class="fa fa-chevron-right"></span></div>
</div>
</div>
<center>
<button id="btnSlide" class="backColor">
<i class="fa fa-angle-up"></i>
</button>
</center>
JS
/*=============================================
VARIABLES
=============================================*/
var item = 0;
var itemPaginacion = $("#paginacion li");
var interrumpirCiclo = false;
var imgProducto = $(".imgProducto");
var titulos1 = $("#slide h1");
var titulos2 = $("#slide h2");
var titulos3 = $("#slide h3");
var btnVerProducto = $("#slide button");
var detenerIntervalo = false;
var toogle = false;
$("#slide ul li").css({"width":100/$("#slide ul li").length + "%"})
$("#slide ul").css({"width":$("#slide ul li").length*100 + "%"})
/*=============================================
INITIAL ANIMATION
=============================================*/
$(imgProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(imgProducto[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos1[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos1[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos2[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos2[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos3[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos3[item]).animate({"top":30 +"px", "opacity": 1},600)
$(btnVerProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(btnVerProducto[item]).animate({"top":30 +"px", "opacity": 1},600)
setTimeout(function(){
$(btnVerProducto[item]).mouseover(function(){
$(this).css({"background":"#3CB484"});
})
$(btnVerProducto[item]).mouseout(function(){
$(this).css({"background":"#35A679"});
})
},100)
/*=============================================
PAGINATION
=============================================*/
$("#paginacion li").click(function(){
item = $(this).attr("item")-1;
movimientoSlide(item);
})
/*=============================================
MOVE FORWARD
=============================================*/
function avanzar(){
if(item == $("#slide ul li").length -1){
item = 0;
}else{
item++
}
interrumpirCiclo = true;
movimientoSlide(item);
}
$("#slide #avanzar").click(function(){
avanzar();
})
/*=============================================
BACK
=============================================*/
$("#slide #retroceder").click(function(){
if(item == 0){
item = $("#slide ul li").length -1;
}else{
item--
}
movimientoSlide(item);
})
/*=============================================
MOVEMENT SLIDE
=============================================*/
function movimientoSlide(item){
// http://easings.net/es
$("#slide ul").animate({"left": item * -100 + "%"}, 1000, "easeOutQuart")
$("#paginacion li").css({"opacity":.5})
$(itemPaginacion[item]).css({"opacity":1})
interrumpirCiclo = true;
$(imgProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(imgProducto[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos1[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos1[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos2[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos2[item]).animate({"top":30 +"px", "opacity": 1},600)
$(titulos3[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos3[item]).animate({"top":30 +"px", "opacity": 1},600)
$(btnVerProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(btnVerProducto[item]).animate({"top":30 +"px", "opacity": 1},600)
}
/*=============================================
INTERVAL
=============================================*/
setInterval(function(){
if(interrumpirCiclo){
interrumpirCiclo = false;
}else{
if(!detenerIntervalo){
avanzar();
}
}
},3000)
/*=============================================
APPEAR ARROWS
=============================================*/
$("#slide").mouseover(function(){
$("#slide #retroceder").css({"opacity":1})
$("#slide #avanzar").css({"opacity":1})
detenerIntervalo = true;
})
$("#slide").mouseout(function(){
$("#slide #retroceder").css({"opacity":0})
$("#slide #avanzar").css({"opacity":0})
detenerIntervalo = false;
})
最佳答案
可能是事件队列中的 setInterval 事件在页面处于非事件状态(不在前台)一段时间后未得到处理。然后，当您返回它时，所有未决事件都会得到处理，从而产生“赛车”效果。
您可以通过使用一系列 setTimeout 而不是一个 setInterval 来防止这种情况。下一个 setTimeout 只有在当前循环代码有效执行时才会被调用:
function nextCycle(){
if(interrumpirCiclo){
interrumpirCiclo = false;
}else{
if(!detenerIntervalo){
avanzar();
}
}
setTimeout(nextCycle, 3000);
}
setTimeout(nextCycle, 3000);
关于javascript - 几分钟后，我的幻灯片放映速度比平时快，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54244751/