Слайдер изображения JQuery с мышью над событием

Question

В demo первое изображение автоматически открывается, но каждое изображение, которое я накладываю на них, должно скользить.
Я добавил onmouseover событие в html и дал имя главной функции, как показано ниже, но это не сработало.
Как я могу сделать слайдер изображения jQuery с помощью мыши?

HTML:

<ul onmouseover="imageSlider()" id="exampleSlider"> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x260" alt="" /></li> 
    <li><img src="http://placehold.it/500x270" alt="" /></li> 
    <li><img src="http://placehold.it/500x280" alt="" /></li> 
</ul> 
<ul onmouseover="imageSlider()" id="exampleSlider"> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x260" alt="" /></li> 
    <li><img src="http://placehold.it/500x270" alt="" /></li> 
    <li><img src="http://placehold.it/500x280" alt="" /></li> 
</ul> 

Javascript:

function imageSlider() { 

    /* SET PARAMETERS */ 
    var change_img_time  = 3000; 
    var transition_speed = 300; 

    var simple_slideshow = $("#exampleSlider"), 
     listItems   = simple_slideshow.children('li'), 
     listLen    = listItems.length, 
     i     = 0, 

    changeList = function() { 

     listItems.eq(i).fadeOut(transition_speed, function() { 
      i += 1; 
      if (i === listLen) { 
       i = 0; 
      } 
      listItems.eq(i).fadeIn(transition_speed); 
     }); 

    }; 

    listItems.not(':first').hide(); 
    setInterval(changeList, change_img_time); 

}; 

Answer 1

Я не уверен, что если вы пытаетесь это! попробуйте этот

$('img').mouseenter(function(){ //or you can use hover() 
    // Set the effect type 
    var effect = 'slide'; 

    // Set the options for the effect type chosen 
    var options = { direction: "right" }; 

    // Set the duration (default: 400 milliseconds) 
    var duration = 1000; 

    $(this).toggle(effect, options, duration); 
}); 

рабочий скрипку http://jsfiddle.net/raghuchandrasorab/cAsB3/794/

Answer 2

Это ничего не будет анимировать, пока наведении курсора мыши на ползунок, и останавливается, когда мышь покидает область.

$(function() { 

/* SET PARAMETERS */ 
var change_img_time  = 3000; 
var transition_speed = 300; 

var simple_slideshow = $("#exampleSlider"), 
    listItems   = simple_slideshow.children('li'), 
    listLen    = listItems.length, 
    i     = 0, 
    intervalId // Generated id for the interval timer 

    changeList = function() { 

     listItems.eq(i).fadeOut(transition_speed, function() { 
      i += 1; 
      if (i === listLen) { 
       i = 0; 
      } 
      listItems.eq(i).fadeIn(transition_speed); 
     }); 

    }; 

listItems.not(':first').hide(); 


$('#exampleSlider').on('mouseenter', function() { 
    changeList(); // Do this once immediately 
    intervalId = setInterval(changeList, change_img_time); 
}).on('mouseleave', function() { 
    clearInterval(intervalId); // Stop slider 
});; 



}); 

См. this fiddle. Обратите внимание, что если у вас есть несколько слайдеров, вам нужно сопоставить имя класса (или что-то другое, кроме id), поскольку атрибут id должен быть уникальным.