悬停时如何交换超过 3 张图像？

Question

我有一张图片，当我将鼠标悬停在它上面或将鼠标悬停在它上面时，我想要更改图片。不止换一次。就像我有图像的 src: /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.

<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);
        });
    });
});

Answer 1

我已经开始工作了。

WORKING 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'。试试吧。

悬停时如何交换超过 3 张图像？

How to swap more than 3 images when hover it?

javascript

image

hover