循环通过类

我已经得到了下面的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

你能解释什么会淡入淡出吗？ –

回答

相关问题