Question

我有这个网站：backlinkbeat.com。向下，有3个具有背景图像的div。每个背景图像包括诸如“1”，“2”，“3”的数字。我希望这些div分别像交通灯一样闪烁。

我写的脚本没有正确闪烁灯光，正如您在link中看到的那样，这意味着它没有闪烁正确的顺序。我希望以标记中显示的方式使它们闪烁：

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

谢谢， Areeb

Answer 1

我建议你给你的元素一个共同的类，例如：

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

<强> Demo fiddle

Answer 2

这可能是您正在寻找的。 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);
        });
    });
}

}）;

Answer 3

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

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

上

像交通灯一样闪烁的div？

3 个答案: