Question

我创建了这个FlipBoard风格的幻灯片，它在本地工作正常。我正在使用纯JavaScript，因为我上传它的网站声称与jQuery不兼容。但是，它不适用于实际站点。我创建了一个jsFiddle来查看它是否可以在那里工作，即使它声称代码有效，仍然无法正常工作。

这是基本的html结构：

    <ul id="featured">
    <li id="first" class="box">
        <ul class="captions">
            <li><a href="#"><span>Red</span></a></li>
            <li><a href="#"><span>Green</span></a></li>
            <li><a href="#"><span>Blue</span></a></li>
        </ul>
        <ul class="images">
            <li style="background:#ff0000"><a href="#"></a></li>
            <li style="background:#00ff00"><a href="#"></a></li>
            <li style="background:#0000ff"><a href="#"></a></li>
        </ul>
    </li>
    <li id="second" class="box">
        <ul class="captions">
            <li><a href="#"><span>Red</span></a></li>
            <li><a href="#"><span>Green</span></a></li>
            <li><a href="#"><span>Blue</span></a></li>
        </ul>
        <ul class="images">
            <li style="background:#ff0000"><a href="#"></a></li>
            <li style="background:#00ff00"><a href="#"></a></li>
            <li style="background:#0000ff"><a href="#"></a></li>
        </ul>
    </li>
    <li id="third" class="box">
        <ul class="captions">
            <li><a href="#"><span>Red</span></a></li>
            <li><a href="#"><span>Green</span></a></li>
            <li><a href="#"><span>Blue</span></a></li>
        </ul>
        <ul class="images">
            <li style="background:#ff0000"><a href="#"></a></li>
            <li style="background:#00ff00"><a href="#"></a></li>
            <li style="background:#0000ff"><a href="#"></a></li>
        </ul>
    </li>

这是javascript：

window.onload = function(){

function animate(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

function Flip(X) {

    // DECLARE IMAGES
    var thisImg = X.children[1];
    var lastImg = thisImg.children[thisImg.children.length-1];
    var firstImg = thisImg.children[0];
    var secondImg = thisImg.children[1];
    console.log(X, thisImg);
    console.log(firstImg, secondImg, lastImg);

    // DECLARE CAPTIONS
    var thisCap = X.children[0];
    var lastCap = thisCap.children[thisCap.children.length-1];
    var firstCap = thisCap.children[0];
    var secondCap = thisCap.children[1];

    animate(secondImg,"height","px",298,0,750);
    animate(firstImg,"height","px",0,298,750);
    animate(secondCap,"opacity","",1.0,0.0,750);
    animate(firstCap,"opacity","",0.0,1.0,750);

    thisImg.insertBefore(lastImg,firstImg);
    thisCap.insertBefore(lastCap,firstCap);

}

[].forEach.call(document.querySelectorAll('.box'), function(item) {
    setInterval(function(){Flip(item);}, Math.floor(Math.random()*24000) + parseFloat(12000));
});

};

这是jsFiddle：http://jsfiddle.net/FWucA/

Answer 1

您似乎无法捕获实时网站上的onload功能。我已经更新了你的JS小提琴代码，不使用window.onload，它工作正常。 JS Fiddle

function onloading() {

function animate(elem, style, unit, from, to, time) {
    if (!elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            elem.style[style] = (from + step * (to - from)) + unit;
            if (step == 1) clearInterval(timer);
        }, 25);
    elem.style[style] = from + unit;
}

function Flip(X) {

    // DECLARE IMAGES
    var thisImg = X.children[1];
    var firstImg = thisImg.children[0];
    var secondImg = firstImg.children[1];
    var lastImg = thisImg.children[thisImg.children.length - 1];

    // DECLARE CAPTIONS
    var thisCap = X.children[0];
    var firstCap = thisCap.children[0];
    var secondCap = firstCap.children[1];
    var lastCap = thisCap.children[thisCap.children.length - 1];

    animate(secondImg, "height", "px", 298, 0, 750);
    animate(firstImg, "height", "px", 0, 298, 750);
    animate(secondCap, "opacity", "", 1.0, 0.0, 750);
    animate(firstCap, "opacity", "", 0.0, 1.0, 750);

    thisImg.insertBefore(lastImg, firstImg);
    thisCap.insertBefore(lastCap, firstCap);
}
[].forEach.call(document.querySelectorAll('.box'), function (i) {
    setInterval(function () {
        Flip(i);
    }, 1000);
});
};

onloading();

幻灯片在本地工作，但不在现场工作

1 个答案: