Contras de MouseOver para páginas web

Así que actualmente estoy creando un “botón” con múltiples imágenes dentro de él como una presentación de diapositivas y cada vez que lo transfiero, la imagen cambia a otra imagen.

Sin embargo, cada vez que cambia la imagen de la presentación, el efecto MouseOver se elimina a un estado de MouseOut ya que técnicamente el mouse ya no está en la imagen.

También traté de tener un efecto de fundido para mi botón, sin embargo, la mayoría de mis búsquedas conducen al uso de funciones de desplazamiento en lugar de MouseOver y MouseOut.

Entonces, me pregunto si Hover es mejor que MouseOver en términos de sus capacidades potenciales.

¿Es posible pausar el evento de presentación de diapositivas al pasar el mouse, etc.? ¿Y cómo puedo hacerlo?

Aquí está mi código actual:

function.js

$(function () { $('#01 img:gt(0)').hide(); setInterval(function () { $('#01 :first-child').fadeOut(1500) .next('img').fadeIn(1500) .end().appendTo('#01'); }, 3000); }); $(document).ready(function () { $("#image1").mouseover(function () { $(this).attr("src", "images/board_01_over.jpg"); }); $("#image1").mouseout(function () { $(this).attr("src", "https://stackoverflow.com/questions/16549095/cons-of-mouseover-for-webpages/images/board_01_01.jpg"); }); }); 

main.css

  #board { float: left; width: 998px; overflow: hidden; } .fadein { float: left; position: relative; width: 240px; height: 140px; margin: 1px 1px 1px 1px; } .fadein img { position: absolute; left: 0; top: 0; height: 140px; opacity: 0.6; overflow: hidden; } .fadein img:hover { opacity: 1; } 

Main.html

  

Como está utilizando jQuery, puede utilizar la función de hover() .

http://api.jquery.com/hover

 $("#image1").hover(function () { $(this).attr("src", "images/board_01_over.jpg"); }, function () { $(this).attr("src", "images/board_01_01.jpg"); }); 

Para su control deslizante es más fácil hacer un pequeño objeto para que sea más fácil de controlar.

 var Slideshow = { interval:null, start: function () { ... initialize ... // catch the interval ID so you can stop it later on this.interval = window.setInterval(this.next, 3000); }, next: function () { /* * You cannot refer to the keyword this in this function * since it gets executed outside the object's context. */ ... your logic ... }, stop: function () { window.clearInterval(this.interval); } }; 

Ahora puedes llamar fácilmente

 Slideshow.start(); Slideshow.stop(); 

desde cualquier lugar para iniciar y detener su control deslizante.