0

ここで説明した方法以外の別のアプローチを使用して問題を解決しようとしています

だから私は次のような関連するhtmlを持っています:

<div id="main-container"></div>
<div id="list-container">
    <ul id="list">
        <li class="thumb"><img src="img/thumb-image1.jpg"></li>
        <li class="thumb"><img src="img/thumb-image2.jpg"></li>
        <li class="thumb"><img src="img/thumb-image3.jpg"></li>
        <li class="thumb"><img src="img/thumb-image4.jpg"></li>
        <li class="thumb"><img src="img/thumb-image5.jpg"></li>
        <li class="thumb"><img src="img/thumb-image6.jpg"></li>
    </ul>
</div>

次に、次の名前の6つの画像を含むimgフォルダーがどこかにあります。

image1.jpg image2.jpg image3.jpg image4.jpg image5.jpg image6.jpg

そして、jqueryを使用して、cssとリストインデックスを3秒間隔で操作することにより、基本的にコンテナdiv内の画像を交換しようとしています。だから私の最初の推測はこれでした：

$('#list li').each(function(index){

$('#main-container').css({
    'background':'url("img/image'+(index+1)+'.jpg")'
    });

残念ながら、私が望むようには機能していません。最後のインデックスである 5 を吐き出すだけなので、表示される画像は最初の image1 ではなく image6 になり、3 秒後に image2 と 2 秒後に再び image3 が表示されます。

setInterval()では、インデックスを変更して画像の回転効果を作成するにはどうすればよいでしょうか。

ノート：

<div id="main-container"></div>動的に呼び出されたときに img フォルダーに保存されている画像のプレースホルダーとして機能する単なる空のコンテナーです。

実際、js ファイルでは、サムネイルをクリックすると以下のコードが動作します。

$('#list li').each(function(index){

    $(this).on('click', function(){
        $('#main-container').css({
        'background':'url("img/image'+(index+1)+'.jpg")'
        });
    });
});

#main-container私の目的は、サムネイルがクリックされていなくても、連続したスライドショーを作成する際に同等の大きな画像が回転することでした。

4

3 に答える 3

5

OK、実際に何をしようとしているのかが明確になったので、次の方法をお勧めします。これは無期限に実行され、liタグから連続する画像が に割り当てられ#main-containerます。

(function() {
    // create local scope to isolate common variables
    // get image count and paths from the actual HTML so nothing is hard-coded
    var images = $('#list li img');
    var index = 0;
    var target = $("#main-container");

    function next() {
        var src = images.eq(index).attr("src");
        target.css("background-image", 'url(' + src + ')');
        index++;
        // if we've run out of images, start over
        if (index >= images.length) {
            index = 0;
        }
    }
    // execute the first one immediately, then subsequent ones with setInterval()
    next();
    setInterval(next, 3000);
})();

作業例: http://jsfiddle.net/jfriend00/RuFBS/

HTML が提供される前の以前の回答:

画像を何に設定しようとしているのか正確には不明ですが、インターバル タイマーでさまざまな画像を繰り返し処理し、それぞれに 1 つずつ適用する方法を次に示し<li>ます。画像を別のものに適用したい場合は、関連する HTML を開示して、何をターゲットにしようとしているのかを確認できるようにしてください。インターバルタイマーを使用してすべての画像を循環させる方法は次のとおりです。

(function() {
    // create local scope to isolate common variables
    var targets = $('#list li');
    var index = 0;
    var interval = setInterval(function() {
        targets.eq(index).css("background-image", "url(img/image" + index + ".jpg)");
        index++;
        if (index >= targets.length) {
            clearInterval(interval);
        }
    }, 3000);
})();

setTimeout()個人的には、間隔に特定の反復回数がある場合、代わりに次のように使用する傾向があります。

(function() {
    // create local scope to isolate common variables
    var targets = $('#list li');
    var index = 0;
    function next() {
        targets.eq(index).css("background-image", "url(img/image" + index + ".jpg)");
        index++;
        if (index < targets.length) {
            setTimeout(next, 3000);
        }
    }
    next();
})();

本当に画像を回転させようとしているだけの場合#main-container(これは とは関係ありません#list li)、次のように実行できます。

(function() {
    // create local scope to isolate common variables
    var index = 0;
    var numImages = 6;
    var target = $("#main-container");
    function next() {
        target.css("background-image",  "url(img/image" + index + ".jpg)");
        ++index;
        if (index < numImages) {
            setTimeout(next, 3000);
        }
    }
    next();
})();
于 2013-03-10T00:55:15.263 に答える
0

これがあなたが望むものだと思います：

var count = 0;
var imgCOUNT = $('#list li').length;
$('#main-container').css({'background-image' : 'url(img/image1.jpg)','transition' : 'background-image 1s','-webkit-transition' : 'background-image 1s','-moz-transition' : 'background-image 1s'});
var interval = setInterval(function() {
    count++;
    var index = count%imgCOUNT+1;
    $('#main-container').css("background-image", "url(img/image" + index + ".jpg)");
}, 3000);

Firefox でのトランジションの代替ソリューション

var count = 0;
var imgCOUNT = $('#list li').length;
$('#main-container').css({'background-image':'url(img/image1.jpg)'});
var interval = setInterval(function() {
    count++;
    var index = count%imgCOUNT+1;
    $('#main-container').fadeTo(350,.1,function() {
        $(this).css("background-image", "url(img/image" + index + ".jpg)");
    }).delay(350).fadeTo(350,1);
}, 3000);
于 2013-03-10T01:31:20.120 に答える
0 
var count = 0;

$('#list li').each(function(index) {
    count += 1;

    $('#main-container').css({
        'background':'url("img/image' + count + '.jpg")';
    });
});
于 2013-03-10T00:45:29.757 に答える