Ayuda con Slider para que cambie con un click
Publicado por Damianrancid (1 intervención) el 09/03/2015 23:40:41
Hola a todos es mi primer pregunta y el caso es que estoy haciendo un slider pero solo se como hacer el cambio de imagen a otro con function main(){var control = SetInterval(cambiarSlider, 3000);.... es con un intervalo de tiempo.. como hago para que esto cambie no por tiempo si no con un click.
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html LANG="es">
<head>
<meta chrset="UTF-8">
<title>Slider sencillo</title>
<script type="text/javascript" src="slider/jquery.js"></script>
<script type="text/javascript">
var i = 0;$(document).on("ready", main);
function main(){
var control = setInterval(cambiarSlider, 3000);
}function cambiarSlider(){
i++;
if(i == $("#slider img").size()){
i = 0; }$("#slider img").hide();
$("#slider img").eq(i).fadeIn("medium");
}</script>
<style type="text/css">
#container{
margin: 10px auto; width: 300px; } #slider{
height: 300px; } #slider img{
display: none; } #slider img:nth-child(1){
display: block; }</style>
<title>Cantos</title></head>
<body>
<align=left>
<div id="slider">
<img src="slider/taku/taku-page-000.jpg" width="700" height="600">
<img src="slider/taku/taku-page-001.jpg" width="700" height="600">
<img src="slider/taku/taku-page-002.jpg" width="700" height="600">
<img src="slider/taku/taku-page-003.jpg" width="700" height="600">
<img src="slider/taku/taku-page-004.jpg" width="700" height="600">
<img src="slider/taku/taku-page-005.jpg" width="700" height="600">
<img src="slider/taku/taku-page-006.jpg" width="700" height="600">
<img src="slider/taku/taku-page-007.jpg" width="700" height="600">
<img src="slider/taku/taku-page-008.jpg" width="700" height="600">
<img src="slider/taku/taku-page-009.jpg" width="700" height="600">
<img src="slider/taku/taku-page-010.jpg" width="700" height="600">
<img src="slider/taku/taku-page-011.jpg" width="700" height="600">
<img src="slider/taku/taku-page-012.jpg" width="700" height="600">
<img src="slider/taku/taku-page-013.jpg" width="700" height="600">
<img src="slider/taku/taku-page-014.jpg" width="700" height="600">
</div>
</div>
</body>
</html>
Valora esta pregunta
0
