3

1. スライダー アニメーション シーマ n1

ここに画像の説明を入力

2. スライダー アニメーション シーマ n2

ここに画像の説明を入力 前後に 2 つのスライダーがあるとします。両方が同期して同じ側に移動します。最初のものは惰性で動き、ストレッチし、下のもの（メインのもの）は最初から動き始めます。

3. ブラウザでは次のように表示されます

ここに画像の説明を入力

4.これが私がこれまでに達成したことです

HTML

<div id="ghostCarousel">
<div id="content">
    <div>
        <img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
    </div>
    <div>
        <img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
    </div>
    <div>
        <img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
    </div>
    <div>
        <img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
    </div>
    <div>
        <img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
    </div>
</div>
<div class="bg-block"></div>
<div id="gcNav">    <a href="#" class="left"></a>
<a href="#" class="right"></a>

</div>

CSS

html, body {
padding:0;
margin:0;
}
#ghostCarousel {
    overflow: hidden;
    /*position: relative;*/
}
#ghostCarousel #content > div {
    width: 820px;
    height: 330px;
    float: left;
    position: relative;
    /*  nuemus padding reikia padding ploti nustatyt i 0*/
    padding-left:15px;
    padding-right: 15px;
    /*z-index: 99;*/
}
#ghostCarousel #content > div > img {
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
    /* Firefox 10+, Firefox on Android */
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(100%);
    /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    /*z-index: 99;*/
}
#content .active {
    z-index: 9999;
}
#content .active img {
    /*background: #FFF;*/
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale") !important;
    -webkit-filter: grayscale(0%) !important;
}
.bg-block {
    width:880px;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -440px;
    background: #FFF;
    /*z-index: 100;*/
}
#gcNav {
    width: 960px;
    position: absolute;
    top: 135px;
    left: 50%;
    /* move the left edge to the center … */
    margin-left: -480px;
    /* … and move it to the left half the box’ width. */
    /*z-index: 9999;*/
}
#gcNav a {
    display: block;
    width: 40px;
    height: 80px;
    background: url("http://bisonai.infoaleja.lt/wp-content/themes/bisonai/img/controls.png") no-repeat;
}
#gcNav .left {
    background-position: 0 0;
    float: left;
}
#gcNav .right {
    background-position: -40px 0;
    float: right;
}

JS

    $(function () {
    var content = '#ghostCarousel #content';
    var section = content + ' > div';

    var v = $(window).width();
    var w = $(section).width();
    var c;
    var itemuKiekis = $('#content div').length;
    var vidurinioNr;
    var paddingPlotis = 30;
    var itemuSarasas = [];

    function ghostCarousel() {



        for (var i = 1; i <= itemuKiekis; i++) {
            itemuSarasas[i] = $('#content div:nth-child(' + (i) + ')').html();
            $('#content h3').hide();
            $('#content p').hide();
            //console.log(itemuSarasas[i]);
        }

        if (itemuKiekis % 2 === 0) {
            c = ((w + paddingPlotis) * $(section).length - v + w) / 2;
            vidurinioNr = itemuKiekis / 2 + 1;

            var index = 1;
            for (var i = vidurinioNr; i <= itemuKiekis; i++) {
                $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
                $('#content div:nth-child(' + index + ')').html(itemuSarasas[i]);
                console.log("i:" + i + " index:" + index);
                index++;
            }

            for (var i = 1; i <= vidurinioNr; i++) {
                $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
                console.log("i:" + i + " index:" + index);
                index++;
            }
        } else {
            c = ((w + paddingPlotis) * $(section).length - v) / 2;
            vidurinioNr = (itemuKiekis + 1) / 2;

            var index = 1;
            for (var i = vidurinioNr; i <= itemuKiekis; i++) {
                $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
                //console.log("i:" + i);
                index++;
            }

            for (var i = 1; i < vidurinioNr; i++) {
                $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
                console.log("i:" + i);
                index++;
            }
        }

        $('#content div:nth-child(' + vidurinioNr + ')').attr("class", "active");

        console.log("v:" + v);
        console.log("w:" + w);
        console.log("c:" + c);
        console.log("itemuKiekis:" + itemuKiekis);
        console.log("vidurinioNr:" + vidurinioNr);

        //TODO: keisti ilgi kad tilptu visos ft, jei netelpa
        $(content).width((w + paddingPlotis * 2) * $(section).length);
        $(content).css('margin-left', -c);

        $('#gcNav a.left').click(function (e) {
            e.preventDefault();


            if ($(content).is(':animated')) return false;
            $('#content .active h3').fadeOut();
            $('#content .active p').fadeOut();
            $('#content div:nth-child(' + (vidurinioNr + 1) + ')').attr("class", "active");
            $('#content div:nth-child(' + (vidurinioNr) + ')').removeClass("active");

            $(content).animate({
                marginLeft: '-=' + w
            }, 500, function () {
                var first = $(section).eq(0);
                $(section).eq(0).remove();
                $(this).animate({
                    marginLeft: '+=' + w
                }, 0);
                $(this).append(first);

                $('#content .active h3').fadeIn();
                $('#content .active p').fadeIn();
            });
        });
        $('#gcNav a.right').click(function (e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $('#content .active h3').fadeOut();
            $('#content .active p').fadeOut();
            $('#content div:nth-child(' + (vidurinioNr - 1) + ')').attr("class", "active");
            $('#content div:nth-child(' + (vidurinioNr) + ')').removeClass("active");
            $(content).animate({
                marginLeft: '+=' + w
            }, 500, function () {
                var end = $(section).length - 1;
                var last = $(section).eq(end);
                $(section).eq(end).remove();
                $(this).animate({
                    marginLeft: '-=' + w
                }, 0);
                $(this).prepend(last);

                //$('#content div:nth-child(' + vidurinioNr + ')').attr("class","active");
                $('#content .active h3').fadeIn();
                $('#content .active p').fadeIn();
            });
        });

    }

    ghostCarousel();

    $(window).resize(function () {
        v = $(window).width();
        w = $(section).width();
        c = ((w + paddingPlotis) * $(section).length - v) / 2;
        $(content).css('margin-left', -c);

    });
});

動作中のjsfiddleの例 - http://jsfiddle.net/V9RyW/

fiddle をチェックすると、画像が直線になり、クリックすると 1 つずつ進むことがわかります。また、着信写真は「アクティブ」クラスになります。

コードを変更するには、n1 スキームの 3 番目と 5 番目のスライドの 1/3 が 4 の後ろに隠れるようにしますか?

また、shema n2 のようなアニメーションを実現するにはどうすればよいですか?

4

2 に答える 2

0

この質問はかなり広いですが、次のようなことができます

li{
display:inline-block;
}
li .arrows{
 position:relative;
 top:50%;

}
于 2013-07-16T14:24:43.890 に答える
0

画像のグループを左右に手動でスクロールできる、SimplyScroll という JavaScript ライブラリを見つけました。これがあなたの意図のようです。

また、正確な仕様を満たすと思われる実際の例も見つけました。

于 2013-07-16T14:35:43.203 に答える