Buen dia sebl, antes que nada dejame decirte que esto es una pregunta para el foro de JavaScript, no de Java (si, se parece el nombre y se genera esa confusion, pero no son lo mismo, ten cuidado con eso).
Ojala pasen el tema al foro que corresponde, pero igual se te puede ayudar, veo que estas usando el Jquery, para lo que preguntas, necesitas usar los metodos .mouseenter y .mouseleave, eso es facil de usar si estas usando timer.
para eso podrias usar este ejemplo y adaptarlo a lo que tu necesitas, o tomar lo que necesitas y agregarlo al tuyo, como sea creo que te servira:
El CSS:
Código HTML:
#slideshow {
position: relative;
}
#slideshow div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
.red { background: red; }
.green { background: green; }
.blue { background: blue; }
El HTML:
Código HTML:
<div id="slideshow">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
El Script del Jquery:
Código:
$(document).ready(function() {
var timer;
$("#slideshow > div:gt(0)").hide();
$("#slideshow")
// Cuando el mouse entra limpia el timer si esta inicializado
.mouseenter(function() {
if (timer) { clearInterval(timer) }
})
// Cuando el mouse sale inicializa el slideshow
.mouseleave(function() {
timer = setInterval(function() {
$("#slideshow > div:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo("#slideshow");
}, 3000);
})
// Disparador de slideshow
.mouseleave();
});
Espero que te sirva