画像を保持する4つのdivがあります
私はカードを裏返す効果を使用しています。これは現在機能しています。ここにフィドルがある ので、私の意味がわかります。
ユーザーが画像の上にいるたびに、各 div の画像を変更したいと思います。これを行うために、4 つの配列を作成しました
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 の配列から画像を動的に変更するにはどうすればよいですか?
だから
- 初めてユーザーがdivにカーソルを合わせると、配列の最初の画像が変更されて表示されます
- ユーザーが2回目にdivをホバーすると、2番目の画像が配列内の2番目の画像アドレスによって変更されます...
私のフィドルを見てください。この機能を追加するにはどうすればよいですか?
アップデート：
私が行った次の回答のアドバイス：
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);
}
});
})
しかし、うまくいかないようです。誰かがこの問題で私を助けてくれますか?