Question

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

这就是我想出的：的 Fiddle

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

但是这有两个问题，

我想在html中包含所有图像链接，例如：<img src="img1.png"><img src="img2.png">等包含在div中并使其可见或不显示（认为这是最好的方式）。
我只需将它悬停在图像上即可。

你们有什么想法吗？我不需要代码，只需向正确的方向推进：）

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

Answer 1

JSFiddle

 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 interval;
    var i = 0;

    $(function () {
        $("img").mouseover(function () {
            interval = setInterval(fadeDivs, 1000);
        })
       .mouseout(function () {
                clearInterval(interval);

        });
    });

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

Answer 2

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

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

<强>演示

Try before buy

Answer 3

试试这个：http://jsfiddle.net/6sbu79cy/1/

<div id="myimage">
<img src="http://www.avsforum.com/photopost/data/2277869/9/9f/9f50538d_test.jpeg" />
</div>



 var images = [];
images[1] = "http://www.avsforum.com/photopost/data/2277869/9/9f/9f50538d_test.jpeg";
images[2] = "http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg";


var i = 0;

$('#myimage').hover(function(){ fadeDivs() });


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


    i++;
         }, 2000);
    setTimeout(function(){},1000);
}

Answer 4

使用data-index = 0和类标识创建图像。

{{1}}

Answer 5

这是一个非常简单的解决方案，对您的代码没有太大的改变。

我已经为图像添加了一个悬停侦听器，并为该间隔添加了一个变量，以便在您悬停时可以清除它。也可以移动一两件事。

https://jsfiddle.net/2nt2t09w/7/

var images = [];
images[0] = "http://placehold.it/100x100";
images[1] = "http://placehold.it/200x200";
images[2] = "http://placehold.it/300x300";
images[3] = "http://placehold.it/400x400";
images[4] = "http://placehold.it/500x500";
images[5] = "http://placehold.it/600x600";

var MyInterval;
var i = 0;
$('img').hover( function() {
    MyInterval = setInterval(fadeDivs, 1000);
    var $this = $(this);
    function fadeDivs() {
        i++;
        i = i < images.length ? i : 0;
        $this.fadeOut(100, function(){
            $(this).attr('src', images[i]).fadeIn(100);
        })
    }
}, function() {
    clearInterval(MyInterval);
});

img {
    height:100px;
    width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/100x100" />

Answer 6

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

构建数组
预加载图像，实现无闪烁体验
在mouseover
循环更改src
在mouseout

我希望在html中包含所有图像链接：包含在div和make中它是否可见（认为这是最好的方式）

没关系，但最好根据数组的大小动态创建图像，这样您就不必对代码进行硬编码，并且可以在需要时轻松将其丢弃。

这是一个简单的例子（小提琴：http://jsfiddle.net/vz38Lzw7/1/）

<强>段：

var x = [
    'http://lorempixel.com/200/200',
    'http://lorempixel.com/201/200',
    'http://lorempixel.com/200/201'
];
var index = 0, $img = $("#image1");

/*--- Pre-load images ---*/
var d = []; // create an array for holding dummy elements
for (var i = 0; i < x.length; i++) {
    d[i] = $("<img>"); // create an img and add to the array
    d[i].attr('src', x[i]).hide(); // add src to img and hide it
    $("body").append(d[i]); // add the img to body to start load
}

/*--- Bind events ---*/
$img.on("mouseover", function () {
    timer = setInterval(changeImages, 1000);
});

$img.on("mouseout", function () {
    clearInterval(timer);
});

/*--- Function to cycle the array ---*/
function changeImages() {
    index = (index + 1) % x.length;
    $img.fadeOut(250, function() {
        $(this).attr('src', x[index]).fadeIn(250);
    });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="image1" src='http://lorempixel.com/200/200' />

在悬停

6 个答案: