如何在悬停时交换3个以上的图像

How to swap more than 3 images when hover it?

本文关键字：图像 3个交换悬停更新时间：2023-09-26

我有一个图像，当我将鼠标悬停在它上面时，我希望图像发生变化。不止一次改变。就像我有图像的src:/images/start/1.jpg、/images/start/2.jpg、/iimages/start/3.jpg、/iimages/start/4.jpg、/iImages/start/5.jpg、/images/start/6.jpg、/itures/start/7.jpg、/igraphics/start/8.jpg、/igers/start/9.jpg、/ights/start/10.jpg。

<img src="/images/start/1.jpg" alt="Start" data-count="10" data-path="/images/start/{index}.jpg" />

在.js文件中：

 $(document).ready(function(){
    $( "#images img" ).each(function() {
        var Ding = '';
        $('#images img').mouseover(function() {
            var url=''; var index = 2;
            var count = $(this).attr('data-count');
            var path = $(this).attr('data-path');
            var $this = $(this);
            Ding = setInterval(function() {
                if (index <= count) {
                    url = path.replace('{index}', index);
                    $this.attr('src', url).fadeIn();
                    index++;
                }
                else {
                    index = 1;
                    url = path.replace('{index}', index);
                    $this.attr('src', url).fadeIn();
                    index++;
                }
            }, 800);
            }),
            $('#images img').mouseout(function(){
                var path = $(this).attr('data-path');
                var $this = $(this);
                url = path.replace('{index}', 1);
                $this.attr('src', url).fadeIn();
                clearInterval(Ding);
        });
    });
});

我已经开始工作了。

工作FIDDLE

我用jquery做过，但我想你知道那是什么。如果你的网站上没有jquery，请粘贴这个（在<head>部分）：

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function(){
    var images = ['/images/start/1.jpg','/images/start/2.jpg','/images/start/3.jpg','/images/start/4.jpg','/images/start/5.jpg','/images/start/6.jpg','/images/start/7.jpg','/images/start/8.jpg','/images/start/9.jpg','/images/start/10.jpg',];
    var Ding = '';
    $('.imageChanger').hover(function(){
        var Counter = 0;
        Ding = setInterval(function(){
            if(Counter < (images.length - 1)){
                Counter++;
                $('img').attr('src',images[Counter]).fadeIn();
            }
            else{
                Counter = 0;
                $('img').attr('src',images[Counter]).fadeIn();
            }
        }, 3000);
    },function(){
        clearInterval(Ding);
    });
});
</script>

悬停效果应该发生的第一个图像必须具有class='imageChanger'。试试看。