循環通過類

我已經得到了下面的html，我希望通過它自動循環。它目前通過onclick手動完成。但我怎樣才能讓它循環？它基本上只是改變了類名稱上的包裝DIV像這樣：通過tab1class="background_tab1"循環：循環通過類

<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>

所以我需要這個到tab7。

來源

2012-12-05 PeteTheGreek

看看使用jquery嗎？ – CR41G14

@ CR41G14：單憑這一點無助於解決問題。另外，如果沒有jQuery，這絕對是可能的，但也許並不那麼容易。 – Constantinius

@Constantinius我基本上正在爲研究設置一個平臺 – CR41G14

jQuery有非常好的類操作方法。您只需要解析當前的類以查找當前的編號，或將其存儲在全局變量中，並在設置下一個類時執行i++ % 7。

來源

2012-12-05 11:13:44

如果你知道你事前類名稱，這會做：

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-05 11:23:25 Yoshi

這很好，謝謝，你如何添加淡入淡出？ .fadeIn/Out，但你把它放在哪裏？在next（）。fadeIn（500）之後？ – PeteTheGreek

你想淡出背景圖片？ – Yoshi

是啊他們之間淡入淡出 – PeteTheGreek

你其實並不需要使用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-05 11:23:47 pxx

對於純javascript的+1 – Th0rndike

這裏是做的一種方式它：

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);

}）;

Demo here

來源

2012-12-05 11:42:17

這是很好的作品，在那裏會淡化？在.text（j）.fade（500）之後; ？ – PeteTheGreek

你能解釋什麼會淡入淡出嗎？ –

回答

相關問題