0

以下の html があり、それを自動循環させたいと考えています。現在、onclick を使用して手動で行われています。しかし、どうすればそれを循環させることができますか？基本的には、ラッパー div のクラス名を次のように変更するだけです。

<body>
    <div id="client-relations-bg" class="background_tab1">
        ...content...
    </div>
</body>

頭の中にクラス画像情報があります：

<style type="text/css">
    #client-relations-bg.background_tab1{background: url('/media/2/background-image-1.png') no-repeat center top;}
    #client-relations-bg.background_tab2{background: url('/media/32/background-image-6.jpg') no-repeat center top;}
    #client-relations-bg.background_tab3{background: url('/media/17/background-image-3.jpg') no-repeat center top;}
    #client-relations-bg.background_tab4{background: url('/media/12/background-image-2.png') no-repeat center top;}
    #client-relations-bg.background_tab5{background: url('/media/22/background-image-4.jpg') no-repeat center top;}
    #client-relations-bg.background_tab6{background: url('/media/37/background-image-7.jpg') no-repeat center top;}
    #client-relations-bg.background_tab7{background: url('/media/2900/Header_image.jpg') no-repeat center top;}
</style>

だから私はこれが必要です：class="background_tab1"に循環するtab1ためにtab7。

4

4 に答える 4

3

実際にはjQueryを使用する必要はありません

(function(){
    var interval = 1000;
    var currentBackgroundId = 1;
    window.setInterval(function(){
        currentBackgroundId++;
        if (currentBackgroundId == 8) currentBackgroundId = 1;

        var element = document.getElementById('client-relations-bg');
        element.className = 'background_tab' + currentBackgroundId;
    }, interval);
})();
于 2012-12-05T11:23:47.000 に答える
1

これを行う1つの方法は次のとおりです。

var classes = [
    "background_tab1",
    "background_tab2",
    "background_tab3",
    "background_tab4",
    "background_tab5",
    "background_tab6",
    "background_tab7"
];
setInterval(function() {
    var $div = $("#client-relations-bg");
    $.each(classes, function(i, c) {
        if ($div.hasClass(c)) {
            var j = (i + 1) % classes.length;
            $div.removeClass(c).addClass(classes[j]).text(classes[j]);
            return false;
        }
    });
}, 2000);

}); </p>

デモはこちら

于 2012-12-05T11:42:17.033 に答える
1

jQuery には、非常に優れたクラス操作メソッドがあります。必要なのは、現在のクラスを解析して現在の番号を探すか、それをグローバル変数に格納しi++ % 7て次の値を設定するときに行うことだけです。

于 2012-12-05T11:13:44.260 に答える
1

クラス名が事前にわかっている場合は、次のようになります。

var
  classList = ['background_tab1', 'background_tab2', 'background_tab3'],
  $el = $('#client-relations-bg');

(function next() {
  setTimeout(function () {
    classList.push(classList.shift());
    $el.removeClass().addClass(classList[0]);
    next();
  }, 2000);
}());

http://jsfiddle.net/c2uqp/

于 2012-12-05T11:23:25.887 に答える