Cómo evitar que un slider de imágenes cambie automáticamente con el tiempo

Hola a todos es mi primer pregunta y el caso es que estoy haciendo un slider pero solo se cómo hacer el cambio de imagen a otro con function main() { var control = SetInterval(cambiarSlider, 3000);. Esta función cambia las imágenes con un intervalo de tiempo, pero cómo hago para que esto cambie no por tiempo si no con un click.

<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>
Cantos de la danza mirando al sol/ Wi wang wacipi lowan.
<br> Taku Wakan.
<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer"> <param name="wmode" value="transparent" /><param name="movie" value="dewplayer.swf" /> <param name="flashvars" value="mp3=taku.mp3" /> </object>
 
<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>

Respuestas

Debes usar el click de jQuery para capturar el evento:

$('.selector').on('click', function(){
    // Aquí realiza el cambio de imagen
});

@SakyaStelios

10 marzo 2015, 4:36

Como te comenta @SakyaStelios tienes que usar el evento click de jQuery. Aquí tienes un ejemplo de código que te puede servir de inspiración:

<script type="text/javascript">
$(function() {
    var imagenSeleccionada = 0;
    var numeroTotalImagenes = $('#slider img').length;
 
    $('#slider img').on('click', function() {
        imagenSeleccionada++;
        if (imagenSeleccionada >= numeroTotalImagenes) {
            imagenSeleccionada = 0;
        }
 
        $('#slider img').hide();
        $('#slider img').eq(imagenSeleccionada).fadeIn('medium');
    });
});
</script>

@javiereguiluz

10 marzo 2015, 8:55