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

В demo первое изображение автоматически открывается, но каждое изображение, которое я накладываю на них, должно скользить.
Я добавил onmouseover событие в html и дал имя главной функции, как показано ниже, но это не сработало.
Как я могу сделать слайдер изображения jQuery с помощью мыши?Слайдер изображения 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); 

};

источник

2014-11-04 Tahtakafa

Итак, что именно вы хотите совершить при наведении курсора мыши? Поскольку слайдер работает автоматически, я не совсем понимаю, что это за желаемый эффект. И нет дубликатов идентификаторов в HTML. – algoni

@algoni Я хочу изменить эти четыре изображения с помощью цикла, когда я на них курю. Я буду использовать изменение изображений в качестве предварительного просмотра видео. – Tahtakafa

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

$('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/

источник

2014-11-04 14:15:02

Я хочу изменить эти четыре изображения с помощью петли, когда я курю над ними. Я буду использовать изменение изображений в качестве предварительного просмотра видео. – Tahtakafa

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

$(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 должен быть уникальным.

источник

2014-11-07 08:42:21 algoni

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

ответ

Смежные вопросы