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

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

这是我有的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;
    });

});

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

最佳答案

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

关于javascript - 如果鼠标移到图像上，它将显示播放/停止/暂停按钮，如何添加onmouse事件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27157042/