0

この FlipBoard スタイルのスライドショーを作成しましたが、ローカルでは問題なく動作します。アップロード先のサイトが jQuery ではうまく動作しないと主張しているため、純粋な JavaScript を使用しています。ただし、ライブサイトでは機能しません。そこで動作するかどうかを確認するために 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/

4

1 に答える 1