JavaScript - Ayuda con Slider para que cambie con un click

   
Vista:

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
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 xve

Ayuda con Slider para que cambie con un click

Publicado por xve (1595 intervenciones) el 10/03/2015 09:02:53
Hola, una manera podría ser así:

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
<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).ready(function(){
            $("#slider img").click(function(){
                cambiarSlider();
            });
        });
 
        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>
    <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>
</body>
</html>
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