JavaScript - Slider, avanzar onclick

   
Vista:

Slider, avanzar onclick

Publicado por Antonio (16 intervenciones) el 30/03/2017 01:49:03
Buenas, tengo este código, bastante sencillo, soy novato jeejeje

HTML

1
2
3
4
5
6
7
8
9
10
11
<div id="photoShowContainer">
  <div id="photoShowWrap">
    <div id="photoShow">
        <img src="./recursos/imagenes/portfolio/3/2.jpg"/>
        <img src="./recursos/imagenes/portfolio/3/3.jpg"/>
        <img src="./recursos/imagenes/portfolio/3/4.jpg"/>
        <img src="./recursos/imagenes/portfolio/3/5.jpg"/>
        <img id= "one" src="./recursos/imagenes/portfolio/3/1.jpg"/>
    </div>
  </div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#photoShowContainer{
  margin: 0px auto 0px auto;
  position: relative;
  width: 800px;
  height: 400px;
}
 
#photoShowWrap{
  height: 400px;
  overflow: hidden;
   position: relative;
  width: 100%;
  z-index: 1;
}
 
#photoShow{
  height: 400px;
	position: relative;
  width: 2000px;
}
 
#photoShow img{
  float: left;
  height: 400px;
  width: 400px;
}

JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
  setInterval(rotateImages, 4000);
});
function rotateImages(){
  $("#photoShow").animate({marginLeft: "-400px"}, 1000).delay(4000);
  $("#photoShow").animate({marginLeft: "-800px"}, 1000).delay(4000);
  $("#photoShow").animate({marginLeft: "-1200px"}, 1000).delay(4000);
  $("#photoShow").animate({marginLeft: "-1600px"}, 1000).delay(4000);
  $("#photoShow").animate({marginLeft: "0px"}, 1000).delay(4000);
}

-------------------------------------------------------------------------

Funciona bien, van pasando las imágenes correctamente, lo que me gustaría es que si el usuario quiere acelerar el proceso pueda dar click al div y la imagen pase sin esperar los 4 segundos...

No me vale next, preview, pues entra en conflicto con otro script que tengo, no entiendo mucho de javascript, pero lo he probado y no funciona, con darle click al div me vale...

Un saludo y gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow

Slider, avanzar onclick

Publicado por ScriptShow (436 intervenciones) el 01/04/2017 22:53:41
Saludos Antonio,

has probado algo parecido, a ver qué hace:

1
<div id="photoShow" onclick="rotateImages()">

No lo he probado. Inténtalo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Slider, avanzar onclick

Publicado por Antonio (16 intervenciones) el 02/04/2017 00:24:47
Si scriptshow, probado, voy a poner otro slider... gracias y saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar