0

  1. 我有四个保存图像的 div

  2. 我正在使用翻转卡片的效果，这目前正在工作，这是小提琴 ，所以你可以明白我的意思。

  3. 现在我想在每次用户浏览图像时更改每个 div 的图像。为此，我创建了四个数组

    var arrFirstYellowCard = ["http://i.jootix.com/r/Flower-1920x1080.jpg", "http://7art-screensavers.com/screenshots/wet-flowers/incredible-orange-flower.jpg", "http://www.hdwallpapers.in/walls/big_yellow_flower-HD.jpg"];
var arrSecondPurpleCard = ["http://www.dazzlewallpapers.com/wp-content/uploads/2012/07/Lotus-Flower-5.jpg", "hhttp://7art-screensavers.com/screenshots/wet-flowers/wet-violet-flower.jpg"];
var arrThirdVectorFlower = ["http://0.tqn.com/d/rubberstamping/1/0/6/m/-/-/flower-outline.png", "http://openclipart.org/people/PeterM/PeterM_Flower_2.svg"];
var arrfourthCrazyArt = ["http://www.bitrebels.com/wp-content/uploads/2012/11/electrocuted-flowers-robert-buelteman-1.jpg", "http://loadpaper.com/large/Flowers_wallpapers_251.jpg"];

例如对于第一个 div：

<section class="card-container">
    <div class="card over" data-direction="right">
        <div class="front">
            <h2>yellow flowers</h2>

            <h4>(Right)</h4>

        </div>
        <div class="back">
            <img src="CHANGE IMAGE DYNAMICALLY USING ARRAY arrFirstYellowCard" width="100%;" height="100%;" alt="" />
        </div>
    </div>
</section>

我如何根据用户是否将鼠标悬停在卡片上来动态更改每个 div 数组中的图像？

所以

  1. 第一次用户悬停 div 更改数组中的第一个图像并显示
  2. 第二次用户悬停div，第二张图片被数组中的第二张图片地址更改...

请看看我的小提琴。我将如何添加此功能？

更新：

按照我所做的回答建议：

var arrFirstYellowCard = ["http://7art-screensavers.com/screenshots/wet-flowers/incredible-orange-flower.jpg", "http://www.hdwallpapers.in/walls/big_yellow_flower-HD.jpg"];
var arrSecondPurpleCard = ["http://www.dazzlewallpapers.com/wp-content/uploads/2012/07/Lotus-Flower-5.jpg", "hhttp://7art-screensavers.com/screenshots/wet-flowers/wet-violet-flower.jpg"];
var arrThirdVectorFlower = ["http://0.tqn.com/d/rubberstamping/1/0/6/m/-/-/flower-outline.png", "http://openclipart.org/people/PeterM/PeterM_Flower_2.svg"];
    
        
$(function () {
    $('.over').hover(function () {
        
        if ($(this).attr('data-direction') == 'right') {
            $(this).addClass('flipping-right');
        }   
        if ($(this).attr('data-direction') == 'left') {
            $(this).addClass('flipping-left');
        }
        
    }, function () {
        if ($(this).attr('data-direction') == 'right'){    
            $(this).removeClass('flipping-right');
            var img = $(this).find('img');
            setTimeout(function() {
               img.attr('src', arrFirstYellowCard[i]);
               i++;
               if(i > arrFirstYellowCard.length-1)
                  i=0;
           }, 800);
        }
        if ($(this).attr('data-direction') == 'left'){    
            $(this).removeClass('flipping-left');
            var img = $(this).find('img');
            setTimeout(function() {
               img.attr('src', arrSecondPurpleCard[i]);
               i++;
               if(i > arrSecondPurpleCard.length-1)
                  i=0;
           }, 800);
        }
        
        
    });
})

但这似乎不起作用，有人可以帮我解决这个问题吗？

4

2 回答 2

1

您可以在更新的jsfiddle中找到请求功能的示例。为简单起见，我只留下了一张卡片。我在数组中迭代，在部分中查找图像并更改它的 src 属性。setTimeout 用于延迟 src 的更改，以确保卡被翻转并使用后不会立即看到更改。

主要部分是：

var img = $(this).find('img');
img.attr('src', arrFirstYellowCard[i]);

并在每次调用时增加 i 并在超过数组长度时更改回 0。

于 2013-03-12T01:49:32.180 回答
1 
$(this).find('img').attr('src', arrFirstYellowCard[i]);

和i增值

于 2013-03-12T01:52:25.323 回答