javascript - qué - Agregue funcionalidades hacia atrás y adelante en la presentación de diapositivas.
qué es un botón de acción (5)
El problema es que setTimeOut ejecutará la función de demora de presentación de diapositivas. Sin embargo, cuando hace clic en un botón, esta ejecución retrasada no se detiene. Para detener esta ejecución, hice un pequeño cambio en el código. Además, resolví el error de referencia en jsfiddle iniciando la funcionalidad onClick a través de jQuery.
Este resultado se puede consultar aquí: https://jsfiddle.net/Lroatbzg/13/
$("#slideshow-wrapper").hover(function(){
$(".left-arrow,.right-arrow").fadeIn();
}, function(){
$(".left-arrow,.right-arrow").fadeOut();
});
var i=1;
var direction=1;
var begin=true;
var latest=Math.random();
function SlideShow(parameter){
if(latest!=parameter)
return; //Return when this function is not called through the last click or timeout.
var total=$(''#slideshow-beta img'').length;
i=i+direction;
if(i>total)
i=1;
if(i<1)
i=total;
begin=true;
for(var j=1;j<=total;j++)
{
if($(''.img_''+j).css(''display'')!=''none'')
{
begin=false;
$(''.img_''+total).fadeOut(1000,function(){
$(''.img_''+j).css(''display'',''none'');
$(''.img_''+i).fadeIn(1000);
});
break;
}
}
if(begin)
$(''.img_''+i).show();
setTimeout(function(){
SlideShow(parameter);
},5000);
}
SlideShow(latest);
$("#left").click(function(){ latest=Math.random(); direction=-1; SlideShow(latest); });
$("#right").click(function(){ latest=Math.random(); direction=1; SlideShow(latest); });
El HTML se cambia de la siguiente manera:
<div id="slideshow-controller">
<div class="left-arrow-div" id="left"><span class="left-arrow">Back</span></div>
<div class="right-arrow-div" id="right"><span class="right-arrow">Forward</span></div>
</div>
Hice una presentación de diapositivas con php y javascript y se deslizan las imágenes muy bien, pero estoy un poco atascado en las funcionalidades anteriores y posteriores y le agradecería que me ayudara un poco aquí. Esto es lo que he hecho hasta aquí:
PHP:
$dir = ''images/slideshow'';
$images = scandir($dir);
$i = 0;
echo ''<div id="slideshow-wrapper">'';
echo ''<div id="slideshow-beta">'';
foreach($images as $img){
if ($img != ''.'' && $img != ''..'') {
$i++;
echo ''<img src="../images/slideshow/''.$img.''" class="img_''.$i.''">'';
}
}
echo ''</div>'';
echo ''<div id="slideshow-controller">'';
echo ''<div class="left-arrow-div"><span class="left-arrow" onclick="SlideShow(-1);"></span></div>'';
echo ''<div class="right-arrow-div"><span class="right-arrow" onclick="SlideShow(1);"></span></div>'';
echo ''</div>'';
echo ''</div>'';
Javascript:
var i=1;
var begin=true;
function SlideShow(x){
if(x==-1){
i--;
}else if(x==1){
i++;
}
var total=$(''#slideshow-beta img'').length;
for(var j=1;j<=total;j++){
if($(''.img_''+j).css(''display'')!=''none''){
begin=false;
break;
}else{
begin=true;
}
}
if(i>total){
i=1;
$(''.img_''+total).fadeOut(1000,function(){
$(''.img_''+i).fadeIn(1000);
});
}else if(begin){
$(''.img_''+i).show();
}else if(!begin){
$(''.img_''+(i-1)).fadeOut(1000,function(){
$(''.img_''+i).fadeIn(1000);
});
}
setTimeout(function(){
i++;
SlideShow(x);
},5000);
}
HTML:
<body onload="SlideShow(false);">
Como puede ver, traté de hacer un evento onclick para cambiar el valor ''i'' en la ejecución, aunque el valor ha cambiado, la imagen no. Tal vez porque presionar atrás / adelante llama a otra instancia de la función en lugar de sobrescribirla. No estoy seguro, estoy perdido en esto.
Aquí hay un fiddle
He realizado una revisión importante, pero la idea sigue siendo la misma ( fiddle ):
Cambios en CSS:
.left-arrow, .right-arrow {
cursor: pointer;
/** display: none **/
}
#slideshow-controller {
z-index: 2;
position: absolute;
/** added **/
opacity: 0;
transition: opacity 300ms ease-in;
/***********/
}
#slideshow-wrapper:hover > #slideshow-controller {
opacity: 1;
}
Cambios en HTML (eliminados en línea onClick):
<div class="left-arrow-div"><span class="left-arrow">Back</span>
</div>
<div class="right-arrow-div"><span class="right-arrow">Forward</span>
</div>
Javascript:
var i = 0;
var images = $(''#slideshow-beta img''); // cache all images
var total = images.length;
var timeout;
/*** hide all images at the start ***/
images.each(function (index) {
$(this).css({
display: ''none''
});
});
/*** bind event handlers to arrows ***/
$(''.left-arrow'').click(function () {
SlideShow(-1);
});
$(''.right-arrow'').click(function () {
SlideShow(1);
});
/*** Start the slideshow on 1st image ***/
SlideShow(0);
function SlideShow(x) {
if (isNaN(x)) { // throw error if x is not a number
throw new Error("x must be a number");
}
clearTimeout(timeout); // clear previous timeout if any to prevent multiple timeouts running
var current = (total + i + x % total) % total; // get the current image index
$(images[i]).fadeOut(1000, function () { // fade out the previous
$(images[current]).fadeIn(1000); // fade in the current
});
i = current; // set i to be the current
timeout = setTimeout(function () { // cache the timeout identifier so we can clean it
SlideShow(1);
}, 5000);
}
He solucionado sus problemas, el principal problema fue que llama a la función en línea, pero la función no existe en este momento (los milisegundos en la carga de la página). El otro fue tu if (ahora con 3 = que incluye el tipo, porque falso, 0, -1 y así sucesivamente son "el mismo". El único problema ahora es que el intervalo se ejecuta de manera infinita y puede llamar a la siguiente imagen inmediatamente después Un cambio manual.
En conclusión, te recomiendo que uses una biblioteca como cycle2 o algo como esto.
https://jsfiddle.net/Lroatbzg/15/
jQuery(window).on(''load'', function() {
$("#slideshow-wrapper").hover(function(){
$(".left-arrow,.right-arrow").fadeIn();
}, function(){
$(".left-arrow,.right-arrow").fadeOut();
});
var i=1;
var total = $(''#slideshow-beta img'').length;
function SlideShow(x) {
if(x === -1) {
i--;
} else if(x === 1) {
i++;
}
if(i > total) {
i = 1;
}
$(''#slideshow-beta img'').hide();
$(''#slideshow-beta .img_'' + i).fadeIn(1000);
}
setInterval(function() {
i++;
SlideShow(i);
}, 5000);
jQuery(''.left-arrow-div'').on(''click'', function() {
SlideShow(-1);
});
jQuery(''.right-arrow-div'').on(''click'', function() {
SlideShow(1);
});
SlideShow(false);
});
Su violín lanza un ReferenceError: SlideShow is not defined (Firefox usando Firebug).
Intente reemplazar la function SlideShow(x){...} con SlideShow = function (x) {...} ( https://jsfiddle.net/Lroatbzg/12/ ).
Sinceramente, no sé por qué funciona esto último, ya que esas dos afirmaciones son equivalentes a las mías (¿alguna explicación al respecto?).
Declarar su función al revés elimina el error, al menos en mi navegador.
utilizar
if(x==''-1''){
i--;
}else if(x==''1''){
i++;
}
en lugar de
if(x==-1){
i--;
}else if(x==1){
i++;
}