0

jqueryを使用してクローンを作成せずに連続/回転スライダーを使用することは可能ですか？要件はオンロードであり、最後のスライドと前のスライドの25％の半分が、最初の/現在のスライドと一緒に表示されます。また、ユーザーが[次へ] / [前へ]ボタンをクリックすると、回転する必要があります。

クローンを作成してみましたが、解像度が小さい場合は問題ありません。解像度が大きい場合は、クローンdivも表示されます。クローンdivを表示しないでください。

詰まりがあれば教えてください。

4

2 に答える 2

0 
<div id="MainSliderContent" style="display: table-cell;">
    <div class="Message">
        Test 1
    </div>
    <div class="Message">
        Test 2
    </div>
    <div class="Message">
        test 3
    </div>
    <div class="Message">
        Test 4
    </div>
</div>​


 $(document).ready(function () {
        //if ($('#MainSliderContent').find('div.Message').length > 1) {
        $('#MainSliderContent').find('div.Message:not(:first)').hide();

        $('#MainSliderContent').live({
            mouseenter: function () {
                $(this).addClass('Hover');
            },
            mouseleave: function () {
                $(this).removeClass('Hover');
            }
        });

        setInterval(function () {
            if (!$('#MainSliderContent').hasClass('Hover')) {
                var $messageObj = $('#MainSliderContent').find('div.Message:visible');
                $messageObj.slideUp('slow').next('div.Message').slideDown('slow');
                $('#MainSliderContent').find('div.Message:last').after($messageObj);
            }
        }, 1 * 1000);
        //}
    });​

デモについては、次のリンクを参照してください: http://jsfiddle.net/nanoquantumtech/BJ6R7/

于 2012-08-11T13:24:26.577 に答える
0

AnythingSlider を使用できます

https://github.com/ProLoser/AnythingSlider/wiki/Usage

クローンに使用されるコードは

slider.$items//callback argument
于 2012-08-11T12:10:39.733 に答える