Question

在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);

};

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属性必须是唯一的。

Jquery图像滑块与鼠标在事件上

2 个答案: