Javascript 悬停时更改图像

我有一个包含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++;
}

var-images=[]；
图像[0]=“img1.png”；
图像[1]=“img2.png”；
图片[2]=“img3.png”；
图片[3]=“img4.png”；
图片[4]=“img5.png”；
图片[5]=“img6.png”；
var i=0；
设置间隔（fadeDivs，1000）；
函数fadeDivs（）{
i=i

但这有两个问题

• 我希望html中的所有图像链接都包含在一个div中，比如：
  等，并使其可见或不可见（认为这是最好的方法）
• 我只需要在我悬停在图像上时发生

你们有什么想法吗？我不需要代码，只要往正确的方向推一下就可以了：）

澄清一下：我在一个页面上有x个图像，比如说25个，当我将鼠标悬停在需要开始更改的25个图像之一上时，我不能有一个包含图像（如答案）的列表，因为（25个图像中的）每个图像都有不同的列表。

var-images=[]；
图像[0]=“img1.png”；
图像[1]=“img2.png”；
图片[2]=“img3.png”；
图片[3]=“img4.png”；
图片[4]=“img5.png”；
图片[5]=“img6.png”；
var区间；
var i=0；
$（函数（）{
$（“img”）.mouseover（函数（）{
间隔=设置间隔（fadeDivs，1000）；
})
.mouseout（函数（）{
间隔时间；
});
});
函数fadeDivs（）{
i=i

试试这个：

var图像=[]；
图像[1]=”http://www.avsforum.com/photopost/data/2277869/9/9f/9f50538d_test.jpeg";
图像[2]=”http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg";
var i=0；
$（'#myimage'）.hover（function（）{fadeDivs（）}）；
函数fadeDivs（）{
setInterval（函数（）{
i=i

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

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>

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

var wrapper=$（'.wrapper'）；
var=null；
var running=null；
图像=[]；
images.push（$（''，{src:'http://placehold.it/200x200&text=X3，alt:“}”）；
eq（0）.附加（图像）；
图像=[]；
images.push（$（''，{src:'http://placehold.it/200x200&text=Y3，alt:“}”）；
eq（1）.附加（图像）；
悬停(
函数（）{
var e=$（本）；
运行=设置间隔（函数（）{
var c=e.find（'.active'）；
var n=c.next（）；
如果（！n.长度）{
n=e.children（）.first（）；
}
c、 removeClass（“活动”）；
n、 addClass（“活动”）；
}, 1000);
},
函数（）{
清除间隔（运行）；
running=null；
}
);

演示

---

使用数据索引=0和类标识创建图像

//call fadeDivs on mouse over 
$('.yourImages').hover(function(){
  setInterval(fadeDivs(this),100);  
});

//This will create unique fadeOut for all images which have mouse over action
//And separate index loadind
function fadeDivs(image) {   
   $(image).fadeOut(100, function(){
       var index = $(this).data('index');
       index  = index  < images.length ? index : 0;
       $(this).attr('src', images[index]).fadeIn(100);
       $(this).attr('data-index',index)
   });
}

//鼠标悬停时调用fadeDivs
$（'.yourImages'）.hover（函数（）{
设置间隔（fadeDivs（本），100）；
});
//这将为所有具有鼠标悬停动作的图像创建唯一的淡出
//和单独的索引loadind
功能fadeDivs（图像）{
$（图像）.fadeOut（100，函数（）{
var index=$（this.data（'index'）；
索引=索引

这里有一个非常简单的解决方案，对您的代码没有太多更改

我在图像中添加了一个悬停侦听器，并在间隔中添加了一个变量，以便在取消悬停时可以将其清除。移动一两件东西

var-images=[]；
图像[0]=”http://placehold.it/100x100";
图像[1]=”http://placehold.it/200x200";
图像[2]=”http://placehold.it/300x300";
图像[3]=”http://placehold.it/400x400";
图像[4]=”http://placehold.it/500x500";
图像[5]=”http://placehold.it/600x600";
var-MyInterval；
var i=0；
$（'img'）。悬停（函数（）{
MyInterval=setInterval（fadeDivs，1000）；
var$this=$（this）；
函数fadeDivs（）{
i++；
i=i
img{
高度：100px；
宽度：100px；
}


当我把鼠标悬停在一个图像上时，我想让它每秒钟都改变一次
列表中的图像

构建阵列
预加载图像以获得无闪烁体验
在鼠标上方启动计时器
循环数组，更改
src
在
mouseout
我想在一个div和make中包含html中的所有图像链接，如：etc
它是否可见（认为这是最好的方式）

这没关系，但是最好是根据数组的大小动态创建图像，这样就不必硬编码标记，并且可以在需要时轻松地将它们处理掉

下面是一个简单的例子（小提琴：）

片段：


var x=[
'http://lorempixel.com/200/200',
'http://lorempixel.com/201/200',
'http://lorempixel.com/200/201'
];
var指数=0，$img=$（“#图像1”）；
/*---预加载图像---*/
变量d=[]；//创建一个arra
.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;
}

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

//call fadeDivs on mouse over 
$('.yourImages').hover(function(){
  setInterval(fadeDivs(this),100);  
});

//This will create unique fadeOut for all images which have mouse over action
//And separate index loadind
function fadeDivs(image) {   
   $(image).fadeOut(100, function(){
       var index = $(this).data('index');
       index  = index  < images.length ? index : 0;
       $(this).attr('src', images[index]).fadeIn(100);
       $(this).attr('data-index',index)
   });
}