1

オンライン ユーザー イメージの効果を作成しましたが、このスクリプトには問題があります。9枚の画像があります。3枚の画像が隠されています。1 つのランダムな画像がフェードアウトしたら、非表示の画像の 1 つに置き換えたいと思います。最初の6枚の画像で同じ画像を見たくありません。

http://seninsayfan.net/user.html

$(document).ready(function() {
setInterval(function() {
 var pic = 1 + Math.floor(Math.random() * 6);
  var picture = 1 + Math.floor(Math.random() * 9);
$(".image-" + pic).each(function() {
$(this).fadeOut(500, function() {
     $(this).html($(".image-" + picture).html());
    });
$(this).fadeIn(500);
});
}, 1000);
});

すべてのマスターに感謝します

4

2 に答える 2

1

コードにいくつかの変更を加えました。http://jsfiddle.net/24Qat/22/で実際の例を見ることができます。

画像の配列を設定しました：

var images = {};
images[0] = "http://seninsayfan.net/ext/avatar/img1.jpg";
images[1] = "http://seninsayfan.net/ext/avatar/img2.png";
images[2] = "http://seninsayfan.net/ext/avatar/img4.jpg";
images[3] = "http://seninsayfan.net/ext/avatar/image1.jpg";
images[4] = "http://seninsayfan.net/ext/avatar/image2.gif";
images[5] = "http://seninsayfan.net/ext/avatar/pic1.gif";
images[6] = "http://seninsayfan.net/ext/avatar/pic2.jpg";
images[7] = "http://seninsayfan.net/ext/avatar/pic3.jpg";
images[8] = "http://seninsayfan.net/ext/avatar/pic4.gif";

そして私は画像のインデックスを保存します：

var shown = [0,1,2,3,4,5];
var hidden = [6,7,8];

ソースとターゲットを選択してスワップを行うよりも、次のようにします。

$(document).ready(function() {
    setInterval(function() {
        // choose target index
        var old_pic =  Math.floor(Math.random() * 6);
        // choose source index
        var new_pic = Math.floor(Math.random() * 3);
        $(".image-" + old_pic).fadeOut(500, function() {
            $(this).find('img').attr("src", images[hidden[new_pic]]);
            var temp = shown[old_pic];
            shown[old_pic] = hidden[new_pic];
            hidden[new_pic] = temp;
        }).fadeIn(500);
    }, 1000);
});

無駄のないコードのために、インデックスを 0 から開始するように変更したことに注意してください。また、最後の 3 つの画像を削除したため (必要なコンテナーは 6 つだけです)、html は次のようになります。

<div class="image image-0" ><img src="http://seninsayfan.net/ext/avatar/img1.jpg"/></div>
<div class="image image-1" ><img src="http://seninsayfan.net/ext/avatar/img2.png"/></div>
<div class="image image-2" ><img src="http://seninsayfan.net/ext/avatar/img4.jpg"/></div>
<div class="image image-3" ><img src="http://seninsayfan.net/ext/avatar/image1.jpg"/></div>
<div class="image image-4" ><img src="http://seninsayfan.net/ext/avatar/image2.gif"/></div>
<div class="image image-5" ><img src="http://seninsayfan.net/ext/avatar/pic1.gif"/></div>
于 2013-01-06T13:32:56.757 に答える
0

画像を設定するとfadeOut()、そのクラスまたはIDが「hidden」または「fadedOut」に設定されます。次に、fadeIn()別のものを試しているときは、hiddenまたはfadedOutから選択し、フェードインするときは、クラスまたはIDの「hidden」または「fadedOut」をクリアします。

于 2013-01-06T12:25:52.343 に答える