0

ユーザーがボタンをクリックするだけで jquery スライダー ギャラリーをページに追加できるページを作成しようとしています。

ほぼ動作するようになりましたが、追加のスライダーが複数ある場合、画像の回転に問題があります。元の slder が飛び跳ねて、2 つの画像しか表示されません。

http://jsfiddle.net/UUKP4/25/を示すためにjsfiddleを作成しました

追加のスライダーは一度だけループして停止します

どんな助けでも大歓迎です。

フィドルのコード

CSS:

    #slideshow {
        position:relative;
        height:350px;
    }
    #slideshow IMG {
        position:absolute;
        top:0;
        left:0;
        z-index:8;
        opacity:0.0;
    }
    #slideshow IMG.active {
        z-index:10;
        opacity:1.0;
    }
    #slideshow IMG.last-active {
        z-index:9;
    }

jscript

    var i;
    var topplus=50;
    function buildslider(i, id, content) {

        id = id + i;

        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', id);
        newdiv.style.position = "absolute";
        newdiv.style.top = +topplus + "px";
        newdiv.style.left = +topplus + "px";
        newdiv.style.display = 'inline-block';

        newdiv.style.width = '320px';
        newdiv.style.height = '270px';
        newdiv.innerHTML = content;
        document.getElementById("content").appendChild(newdiv);            
        topplus=topplus+150;

        function slideSwitch() {
            var $active = $('#' + id + ' #slide_image.active');

            if ($active.length === 0) $active = $('#' + id + ' #slide_image:last');

            var $next = $active.next().length ? $active.next() : $('#' + id + ' #slide_image:first');

            $active.addClass('last-active');

            $next.css({
                opacity: 0.0
            })
                .addClass('active')
                .animate({
                opacity: 1.0
            }, 1000, function () {
                $active.removeClass('active last-active');
            });
        }

        $(function () {
            setInterval(slideSwitch, 3000);
        });
       i++;
    }



    function addSlider() {    
        buildslider('i', 'draggable', '<div id="slideshow"><img id="slide_image" src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" class="active" /><img id="slide_image"  src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" /><img id="slide_image" src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" /></div>');
    }

HTML

<input type='button' value='add slider' id='addSlider' onclick='addSlider();'>
4

1 に答える 1

1

まず最初に: 未知の量の動的に作成された要素を追加する場合は、ID ではなくクラスを使用するように最善を尽くしてください。それらは順応性が高く、複数の要素で同じ ID を使用することは無効な HTML であり、使用しないでください。

すべての ID をクラスに切り替えた後、新しいスライドショーが完全に配置されていることに気付きました。これは、未知の数の要素を動的に作成することも避ける必要があります。その結果、代わりにコンテナを浮かせて、コンテナclear:bothが重ならないようにしていました。

最初はbuildslider関数の大部分を削除しましたが、最終的には完全に削除することにしました。これは、関数が 1 行で実行できるためです。また、寸法を指定するだけのコンテナ div を削除し、代わりにそれを CSS に入れることにしました。

jQuery 自体の変更に関しては、要素に適切なクラスが与えられると、比較的簡単に変更できました。最大の変更点は、setInterval をslideSwitch関数の外に移動して互いに重複しないようにしたこと、パラメータ (親オブジェクト) を追加して複数のスライドショーを異なる開始点/移行点から実行できるようにしたこと、および主に CSS ベースを選択したことですtransition: opacity 1s;。パフォーマンスと編集のしやすさの理由から、.cssjQuery は jQuery よりも優れています。それぞれに移動してアニメーションの長さを変更する.animate代わりに、トランジションの を変更するだけで、すべてのアニメーションに適用されます.animate1s

コメントに投稿した大まかなデモで見たように、1 つのトランジションに不具合があり、最初のスライドの読み込みが遅かった. 最初の問題は、最後のスライドから最初のスライドへのトランジションで重複する問題が原因であり、前述のように to を変更して CSS トランジションを追加することで解決しまし.animatesた.css。2 番目の問題は、デフォルトでクラスが存在しないことが原因だったactiveので、追加された HTML の最初の img にクラスを追加しただけです。ただし、これによりすぐに表示されるようになったので、追加した.animate直後に を追加して、setInterval の反復を気にする必要がないようにしました。

ここに完全なコードがあります

/* HTML */
<input type='button' value='Add Slider' onclick='addSlider()'>
<div id="content"></div>

/* CSS */
#content {
    overflow:hidden;
}
.slideshow {
    float:left;
    clear:both;
    position:relative;
    width:270px;
    height:350px;
}
.slideshow img {
    position:absolute;
    width:320px;
    height:270px;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    transition: opacity 1s;
}
.slideshow img.active {
    z-index:10;
}
.sdeshow img.last-active {
    z-index:9;
}

/* Javascript/jQuery */
var i = 0;    
function slideSwitch($container) {
    var $active = $container.find('.slide_image.active');    

    if ($active.length === 0) { $active = $container.find('.slide_image:last'); }
    var $next = $active.next().length ? $active.next() : $container.find('.slide_image:first');

    $active.addClass('last-active').removeClass('active').css({
        opacity: 0
    });

    $next.addClass('active')
        .css({
        opacity: 1.0
    }, function () {
        $active.removeClass('last-active');
    });
}

function addSlider() {
    $('#content').append('<div class="slideshow"><img class="slide_image active" src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" class="active" /><img class="slide_image"  src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" /><img class="slide_image" src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" /></div>');
    var $addedElem = $('.slideshow:eq(' + i + ')');
    $addedElem.find('.active').animate({ opacity: 1 });
    setInterval(function() { slideSwitch($addedElem) }, 3000);
    i++;
}

完全なデモはこちら

私のコードに関連する質問がある場合はお知らせください

于 2013-08-26T15:03:33.177 に答える