带有鼠标悬停事件的 Jquery 图像滑块答案

【问题标题】：Jquery image slider with mouse over event带有鼠标悬停事件的 Jquery 图像滑块
【发布时间】：2014-11-07 16:42:21
【问题描述】：

在demo 中，第一张图片会自动滑动，但我将鼠标放在它们上面的每张图片都必须滑动。
我在 html 中添加了onmouseover 事件，并为主函数命名，如下所示，但它不起作用。
鼠标悬停时如何做 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);

};

【问题讨论】：

那么你到底想在鼠标悬停时发生什么？由于滑块是自动运行的，所以我不太了解想要的效果。并且 HTML 中没有重复的 ID。
@algoni 当我将鼠标悬停在这四个图像上时，我想用循环更改它们。我将使用更改图像作为视频预览。

标签： javascript jquery event-handling mouseover

【解决方案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/

【讨论】：

当我将鼠标悬停在这四个图像上时，我想循环更改它们。我将使用更改图像作为视频预览。

【解决方案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 属性必须是唯一的。

【讨论】：