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

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

javascript jquery

Javascript 使用循环mouseenter jQuery在x秒后更改图像,javascript,jquery,Javascript,Jquery,我有一个HTML格式的图像，我希望当鼠标进入图像时，这个图像会快速变化，并有一个无限循环。我有很多图像要显示（logo\u白色，logo\u红色，logo\u蓝色，logo\u绿色，…） HTML 这是一个JS代码“工作”。但我认为可能会更好。提前感谢您的回复。不是百分之百确定您的意思，但也许像这样的例子就是您正在寻找的或可以让您开始的这个例子：创建一个包含图像链接的数组预加载这些图像对于“mouseenter”事件，启动一个间隔，并将徽标切换到阵列中的下一个徽标（或在停止的位置继续

我有一个HTML格式的图像，我希望当鼠标进入图像时，这个图像会快速变化，并有一个无限循环。我有很多图像要显示（logo\u白色，logo\u红色，logo\u蓝色，logo\u绿色，…）

HTML

这是一个JS代码“工作”。但我认为可能会更好。

提前感谢您的回复。

不是百分之百确定您的意思，但也许像这样的例子就是您正在寻找的或可以让您开始的

这个例子：

创建一个包含图像链接的数组
预加载这些图像
对于“
```
mouseenter
```
”事件，启动一个间隔，并将徽标切换到阵列中的下一个徽标（或在停止的位置继续）
对于“
```
mouseleave
```
”事件，停止间隔
在页面完全加载（包括图形）时初始化第一个图像

您可以更改变量

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>


var区间；
var currentImageNumber=0；
var intervalInMilliseconds=1000；
变量图像=[
“img/logo_green.png”，
“img/logo_blue.png”，
“img/logo_red.png”，
“img/logo_white.png”
];
功能预加载（阵列图像）{
$（arrayOfImages）.each（函数（）{
（新图像（））.src=this；
});
}
功能开关徽标（图像编号）{
$（'#logo'）.attr（'src'，images[imageNumber]）；
currentImageNumber=currentImageNumber==images.length-1？0:+currentImageNumber；
}
预加载（图像）；
$（文档）.ready（函数（）{
var logo=$（“#logo”）；
logo.mouseenter（函数（）{
interval=window.setInterval（函数（）{
switchLogo（当前图像编号）
}，间隔毫秒）；
});
logo.mouseleave（函数（）{
间隔时间；
});
});
//加载所有图像时
$（窗口）。加载（函数（）{
//将其初始化为第一个映像
switchLogo（当前图像编号）；
});

这里有问题吗，还是有什么不起作用的？非常混乱。他显然想要更好的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);
    });

<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>