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
CSS
JAVASCRIPT
-------------------------------------------------------------------------
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!
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
0
