logo标签列表

jQuery Cycle - 添加然后删除CSS类 - 无限循环

javascriptjqueryloopscycleinfinite
5
如何使用jQuery在一组4个li元素上无限添加和删除CSS类？
基本上，参考这个简单的fiddle（没有任何jQuery）：http://jsfiddle.net/kHsvN/ 我想循环遍历这些盒子，改变一个盒子的CSS样式，然后翻转回原始CSS，接着进入下一个盒子等等...
感谢您的帮助！
据我所理解，任何时候都应该有一个具有该类的方框？ - bardiir
@Ben Davis，请查看我的更新答案/示例。 - The Alpha
4个回答
2
$(document).ready(function() {
   window.setInterval(function() {
        $("#topboxesmenu li a").each(function() {
            $(this).css("background", get_random_color());
    });
  }, 1000);
});

function get_random_color() {
   var letters = '0123456789ABCDEF'.split('');
   var color = '#';
   for (var i = 0; i < 6; i++ ) {
     color += letters[Math.round(Math.random() * 15)];
   }
   return color;
}

这个例子使用了随机颜色，但很容易在.each部分中改为.addClass()。

JS Fiddle（实时示例）

http://jsfiddle.net/kHsvN/6/

随机颜色生成器在JavaScript中
令人印象深刻，但对于OP的要求可能过于复杂了 :) - El Ronnoco
1
你可以尝试这个：

CSS 对于当前项目，添加/删除的类

ul#topboxesmenu li a.current{ background:black }

JS

$('#topboxesmenu li a').each(function(i){
    var t=$(this);
    setTimeout(function(){
        t.addClass('current');
        setTimeout(function(){
            t.removeClass('current');
        }, 1000);
    }, 1100*i);
});

演示

更新：用于连续循环

$(function(){
    loopIt();
});

function loopIt(){    
    $('#topboxesmenu li a').each(function(i){
        var t=$(this);
        setTimeout(function(){
            t.addClass('current');
                setTimeout(function(){
                    t.removeClass('current');
                    if(i==$('#topboxesmenu li a').length-1) loopIt();;
                }, 1000);
        }, 1100*i);
    });
}

演示。

1

试试这个：

jQuery(document).ready(function() {
    window.setInterval(function() {
            var oldBox = jQuery('#topboxesmenu li.active');
            if(oldBox.length == 0 || oldBox.next().length == 0)
            {
                    oldBox.removeClass('active');
                jQuery('#topboxesmenu li:first-child').addClass('active');
            }
            else
                oldBox.removeClass('active').next().addClass('active');
    },2000);
});

它将循环遍历这些框，一个接一个地向它们添加活动类。

http://jsfiddle.net/gKEmL/

还是不行 :( 不明白，因为在 jfiddle 上运行得很好 http://www.deeside.ac.uk/build/test.php - Ben Davis
脚本末尾似乎有一些不可见的非法字符，可能是从复制粘贴中产生的不间断空格。建议尝试从jsfiddle而不是从这里复制代码。 - bardiir
我不知道这些字符是怎么回事...试着从这里复制粘贴：http://pastebin.com/ChXmg0Fc - bardiir
Bardiir - 如果可以的话，再给我一点帮助。我已经更新了测试页面，我想要的是盒子以其悬停状态背景依次循环显示，这可能吗？http://www.deeside.ac.uk/build/test.php 谢谢。 - Ben Davis
只需替换CSS选择器：ul#topboxesmenu li a.schoolleavers:hover -> ul#topboxesmenu li a.schoolleavers:hover, ul#topboxesmenu li.active a.schoolleavers，以及其他所有悬停状态...这样，悬停状态将对悬停和活动类做出反应。 - bardiir
显示剩余3条评论
0

我认为这正是你想要的：

el = $('#topboxesmenu li:first-child');
setInterval(function() {
    el = window.el;
    el.siblings().children('a').css('background','#ff0000');
    el.children('a').css('background-color', 'blue');
    el = el.next().length ? el.next() : el.parent().children('li:first-child');
}, 1000);​

查看工作演示

更新:
关于您的测试页面无法正常工作，您的JavaScript位于标签外，请将您的</body>标签放在</html>标签之前。您目前的代码如下:

</body>

<script type="text/javascript" ....
...
...
</html>

更新2：:
另外，你的jQuery脚本标签：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

应该放在页面的<head>中，而不是您当前所放置的标签内。

谢谢Nelson，我在另一个测试页面尝试了你的解决方案，但它也没有起作用 :S http://www.deeside.ac.uk/build/test2.php - Ben Davis
我发现另一个错误，你的jquery库应该放在<head>标签内，看看我的更新答案。 - Nelson
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接