-2

我有这个网站：backlinkbeat.com。向下，有 3 个具有背景图像的 div。每个背景图像都包含一个数字，例如“1”、“2”、“3”。我希望这些 div 分别作为红绿灯闪烁。

正如您在链接中看到的那样，我编写的脚本没有正确闪烁灯，这意味着它没有按正确的顺序闪烁。我想以标记中显示的方式闪烁它们：

<div style="float:left; height:400px;">
    <div style=" margin-top:50px;">
        <div class="list cufon one" id="blink1" style="width:420px;">put you on just any, <span style="color:#1fbfd1;">www.yourwebsite.com</span>
        </div>
        <div class="list cufon two" id="blink2" style="width:420px;">Press <span style="color:#1fbfd1;">"do it"</span>
        </div>
        <div class="list cufon three" id="blink3" style="width:420px;">see the backlinks <span style="color:#1fbfd1;">roll in!</span>
        </div>   
    </div>
</div>

我写的不能正常工作的脚本是：

setInterval(function () {
    setTimeout(function(){
       var vis1 = $("#blink1").css("visibility");
       vis1 = (!vis1 || vis1 == "visible") ? "hidden" : "visible";
       $("#blink1").css("visibility", vis1);
        }, 1000);
    }, 1000);
setInterval(function() {
    setTimeout(function(){
       var vis2 = $("#blink2").css("visibility");
       vis2 = (!vis2 || vis2 == "visible") ? "hidden" : "visible";
       $("#blink2").css("visibility", vis2);
    }, 2000);
}, 2000);
setInterval(function() {
    setTimeout(function(){
       var vis3 = $("#blink3").css("visibility");
       vis3 = (!vis3 || vis3 == "visible") ? "hidden" : "visible";
       $("#blink3").css("visibility", vis3);
    }, 3000);
}, 3000);

谢谢， 阿雷布

4

3 回答 3

2

我建议你给你的元素一个通用的类，例如：

<div class="blink">One</div>
<div class="blink">Two</div>
<div class="blink">Three</div>

然后，您可以将代码简化为：

//Cache element collection and keep a reference to the visible element 
var $elements = $('.blink').css('visibility','hidden'),
    $visible = $elements.first().css('visibility','visible');

//Single interval function to handle blinking
setInterval(function(){
    //Hide visible element
    $visible.css('visibility','hidden');
    //Find next one
    var $next = $visible.next('.blink');
    if(!$next.length)
        $next = $elements.first();
    //Show next element
    $visible = $next.css('visibility','visible');
},1000);

演示小提琴

于 2013-09-01T09:50:52.983 回答
1

这可能是您正在寻找的。http://jsfiddle.net/andaywells/eQuXn/15/ 我已经修改了这段代码： http: //jsfiddle.net/paislee/pdsu7/5/ 所以每个 div 都保持在原位，'hold' div 保持在那里.

$(document).ready(function () {

var delay = 5000,
    fade = 500;
var banners = $('.banner');
var len = banners.length;
var i = 0;

setTimeout(cycle, delay);

function cycle() {
    $(banners[i % len]).fadeOut(fade, function () {
        $(banners[++i % len]).fadeIn(fade, function () {
            setTimeout(cycle, delay);
        });
    });
}

});

于 2013-09-01T09:55:12.710 回答
1

也许这个例子会对你有所帮助。

CSS 

.lamp {
    height: 30px;
    width: 30px;
    border-style: solid;
    border-width: 2px;
}
.lampRed {
    background-color: red;
}
.lampYellow {
    background-color: yellow;
}
.lampGreen {
    background-color: green;
}

HTML 

<div id="trafficLight">
    <div>Click to Start and Stop</div>
    <div class="lamp" id="Red"></div>
    <div class="lamp" id="Yellow"></div>
    <div class="lamp" id="Green"></div>
</div>

Javascript 

var changeState = (function () {
    var state = 0,
        lamps = ["Red", "Yellow", "Green"],
        lampsLength = lamps.length,
        order = [
            [5000, "Red"],
            [3000, "Red", "Yellow"],
            [5000, "Green"],
            [3000, "Yellow"]
        ],
        orderLength = order.length,
        lampIndex,
        orderIndex,
        sId;

    return function (stop) {
        if (stop) {
            clearTimeout(sId);
            return;
        }

        var lamp,
        lampDOM;

        for (lampIndex = 0; lampIndex < lampsLength; lampIndex += 1) {
            lamp = lamps[lampIndex];
            lampDOM = document.getElementById(lamp);
            if (order[state].indexOf(lamp) !== -1) {
                lampDOM.classList.add("lamp" + lamp);
            } else {
                lampDOM.classList.remove("lamp" + lamp);
            }
        }

        sId = setTimeout(changeState, order[state][0]);
        state += 1;
        if (state >= orderLength) {
            state = 0;
        }
    };
}());

document.getElementById("trafficLight").addEventListener("click", (function () {
    var state = false;

    return function () {
        changeState(state);
        state = !state;
    };
}()), false);

上jsfiddle

于 2013-09-01T10:12:24.860 回答