javascript - 如果鼠标移动到图像上它将显示播放/停止/暂停按钮，如何添加 onmouse 事件？

Question

并且还要为每个按钮创建一个单击事件。如果我单击暂停按钮，它还应该在暂停和继续之间切换按钮文本，并在继续和暂停时根据文本进行操作。

这是我的html代码:

在顶部我包括了 jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.carouFredSel.packed.js" type="text/javascript"></script>

在底部我添加图像:

<div id="wrapper">
    <div id="carousel-wrapper">
        <img id="shadow" src="img/gui/carousel_shadow.png" />
        <div id="carousel">
            <span id="pixar"><img src="img/large/pixar.jpg" /></span>
            <span id="bugs"><img src="img/large/bugs.jpg" /></span>
            <span id="cars"><img src="img/large/cars.jpg" /></span>
            <span id="incred"><img src="img/large/incred.jpg" /></span>
            <span id="monsters"><img src="img/large/monsters.jpg" /></span>
            <span id="nemo"><img src="img/large/nemo.jpg" /></span>
                        <span id="radar"><img src="img/large/radar002665.png" /></span>
            <span id="rat"><img src="img/large/rat.jpg" /></span>
            <span id="toystory"><img src="img/large/toystory.jpg" /></span>
            <span id="up"><img src="img/large/up.jpg" /></span>
            <span id="walle"><img src="img/large/walle.jpg" /></span>
        </div>
    </div>

最后是 JavaScript 代码，在 JavaScript 代码的顶部，我设置了是否使其以不间断的速度移动(播放)和所有:

$(function() {

    $('#carousel span').append('<img src="img/gui/carousel_glare.png" class="glare" />');
    $('#thumbs a').append('<img src="img/gui/carousel_glare_small.png" class="glare" />');
    $('#carousel').carouFredSel({
        responsive: true,
        circular: false,
        auto: true,
                infinite: true,
        items: {
            visible: 1,
            width: 200,
            height: '56%'
        },
        scroll: {
            fx: 'directscroll'
        }
    });

    $('#thumbs').carouFredSel({
        responsive: true,
        circular: false,
        infinite: false,
        auto: false,
        prev: '#prev',
        next: '#next',
        items: {
            visible: {
                min: 2,
                max: 6
            },
            width: 150,
            height: '66%'
        }
    });

    $('#thumbs a').click(function() {
        $('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
        $('#thumbs a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    });

});

当我将鼠标移到任何图像上时，鼠标应显示播放/停止/暂停按钮。

Answer 1

我认为你的问题更多地与插件有关。您应该检查 carouFredSel 的文档，您可以在那里找到可以在单击按钮之后和之前调用的函数。这可能会有所帮助