悬停时更改图像

Maarten Peels 发表于 Dev

马丁·皮尔斯

我有一个网页，上面有x张图片，当我将鼠标悬停在一张图片上时，我想让它每秒更改为列表中的一张图片。

这是我想出的：小提琴

var images = [];
images[0] = "img1.png";
images[1] = "img2.png";
images[2] = "img3.png";
images[3] = "img4.png";
images[4] = "img5.png";
images[5] = "img6.png";

var i = 0;
setInterval(fadeDivs, 1000);

function fadeDivs() {
    i = i < images.length ? i : 0;
    $('img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(100);
    })
    i++;
}

但这有两个问题，

我想<img src="img1.png"><img src="img2.png">在div中包含html中的所有图像链接，例如：etc，并使其可见或不可见（认为这是最好的方法）。
而且我只需要在将鼠标悬停在图像上时才发生它。

你们有什么主意吗？我不需要代码，只需按正确的方向推动即可：)

需要说明的是：我在一个页面上有x张图片，比如说25张，当我将鼠标悬停在25张图片上时，它需要开始更改，因为每张图片（ 25个中的一个）将具有不同的列表。

在此处插入用户名

希望，这就是您想要的。它将所有图像添加到容器中，并在悬停时开始无限旋转。离开元素时，间隔停止。

的HTML

<div class="wrapper">
    <img class="active" src="http://placehold.it/200x200&amp;text=X1" alt="">
</div>

<div class="wrapper">
    <img class="active" src="http://placehold.it/200x200&amp;text=Y1" alt="">
</div>

的CSS

.wrapper {
    position: relative;
    height: 200px;
    margin-bottom: 250px;
}

.wrapper img {
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.wrapper img.active {
    opacity: 1;
}

的JavaScript

var wrapper = $('.wrapper');
var images = null;
var running = null;

images = [];
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=X2', alt: '' } ) );
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=X3', alt: '' } ) );
wrapper.eq(0).append(images);

images = [];
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=Y2', alt: '' } ) );
images.push( $('<img/>', { src: 'http://placehold.it/200x200&text=Y3', alt: '' } ) );
wrapper.eq(1).append(images);

wrapper.hover(
    function() {
        var e = $(this);
        running = setInterval(function() {
            var c = e.find('.active');
            var n = c.next();

            if (!n.length) {
                n = e.children().first();
            }

            c.removeClass('active');
            n.addClass('active');    
        }, 1000);
    },
    function() {
        clearInterval(running);
        running = null;
    }
);