Question

我有一个HTML图像，我希望当鼠标进入图像时，这个图像会以无限循环快速变化。我有很多要显示的图像（logo_white，logo_red，logo_blue，logo_green，...）

HTML

<img src="img/logo_white.png" alt="Logo" id="logo" />

JS

$('#logo').mouseenter(function() {
        var src = ($(this).attr('src') === 'img/logo_white.png')
            ? 'img/logo_red.png'
            : 'img/logo_white.png';
            $(this).attr('src', src);
    });

这个JS代码“工作”。但我认为可能会更好。提前感谢您的回复。

Answer 1

不是100％肯定你的意思，但也许这样的例子是你正在寻找或可以让你开始。

这个例子：

创建一个包含图片链接的数组
预加载这些图片
对于＆＃39; mouseenter＆＃39; event开始一个间隔并将徽标切换到数组中的下一个（或继续它停止的地方）
对于＆＃39; mouseleave＆＃39;事件，停止间隔。
在页面完全加载（包括图形）时初始化第一个图像。 https://api.jquery.com/load-event/

您可以更改变量intervalInMilliseconds以加快或减慢它。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">

        var interval;
        var currentImageNumber = 0;
        var intervalInMilliseconds = 1000;
        var images = [
            "img/logo_green.png",
            "img/logo_blue.png",
            "img/logo_red.png",
            "img/logo_white.png"
        ];

        function preload(arrayOfImages) {
            $(arrayOfImages).each(function(){
                (new Image()).src = this;
            });
        }

        function switchLogo(imageNumber) {
            $('#logo').attr('src', images[imageNumber]);
            currentImageNumber = currentImageNumber === images.length -1 ? 0 : ++currentImageNumber;
        }

        preload(images);

        $(document).ready(function() {
            var logo = $('#logo');

            logo.mouseenter(function() {
                interval = window.setInterval(function () {
                    switchLogo(currentImageNumber)
                }, intervalInMilliseconds);
            });

            logo.mouseleave(function() {
                clearInterval(interval);
            });
        });

        // When all the images are loaded
        $(window).load(function() {
            // Initialize this to the first image
            switchLogo(currentImageNumber);
        });

    </script>
</head>
<body>
    <img src="" alt="Logo" id="logo" />
</body>
</html>

使用循环mouseenter jQuery在x秒后更改图像

1 个答案: