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 / start10.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张以上的图像？

1 个答案: