0

以下のコードは、飛び去る画像を表示するためのものです。ただし、これを行うには「次へ」または「前へ」ボタンをクリックする必要があります。各画像で約5秒間停止し、次の画像に変更してから巻き戻しせずに再び開始するタイマーで自動的に発生するようにしたいと思います。（今のところ巻き戻し機能を使用できますが、最終的には連続的にしたいと思います。これは、基本的に、各画像がリターンをスタックの後ろに飛ばさなければならないことを意味します。

<div id="view">
        <ul id="stack">

            <li><img src="labels/manzonipinotnoir.png" /></li>
            <li><img src="labels/figgepinotnoir.png" /></li>
            <li><img src="labels/marinusbernardusredwine.png" /></li>
            <li><img src="labels/riverbench.png" /></li>


        </ul>
    </div>
<div class="controls">
        <button class="prev"  disabled="disabled">Prev</button>     
        <button class="next" >Next</button>
        <a> Featured Wineries</a>
    </div>




    <script>
    (function($) {

        var y_space = 50,
            z_space = 50;

        var view = $('#view'),
            lis = $('#stack li'),
            prev = $('.controls .prev'),
            next = $('.controls .next'),
            left = $('#rotate_controls .left'),
            centre = $('#rotate_controls .centre'),
            right = $('#rotate_controls .right');

        var z_index = lis.length,
            current_index = 1,
            translate_y = y_space *-1,
            translate_z = z_space *-1;

        lis.each(function() {

            this.style['-webkit-transform'] = 'translate3d(0px, ' + translate_y + 'px, ' + translate_z + 'px)';
            this.style['-moz-transform'] = 'translate3d(0px, ' + translate_y + 'px, ' + translate_z + 'px)';
            this.style['z-index'] = z_index;

            $(this).data('translate_y', translate_y);
            $(this).data('translate_z', translate_z);

            z_index--;
            translate_y -= y_space;
            translate_z -= z_space;

        });

        next.bind('click', function() {
            if($(this).attr('disabled')) return false;
            lis.each(function() {
                animate_stack(this, y_space, z_space);  
            });
            lis.filter(':nth-child(' + current_index + ')').css('opacity', 0);
            current_index ++;
            check_buttons();
        });

        prev.bind('click', function() {
            if($(this).attr('disabled')) return false;
            lis.each(function() {
                animate_stack(this, -y_space, -z_space);    
            });
            lis.filter(':nth-child(' + (current_index - 1) + ')').css('opacity', 1);
            current_index --;
            check_buttons();    
        });

        $(document).bind('mousewheel', function(event, delta, deltaX, deltaY) {
            if(deltaY >= 0) {
                next.trigger('click');
            }
            else {
                prev.trigger('click');
            }
        });

        function check_buttons() {
            if(current_index==1) {
                prev.attr('disabled', true);
            }
            else {
                prev.attr('disabled', false);
            }

            if(current_index == lis.length) {
                next.attr('disabled', true);                
            }
            else {
                next.attr('disabled', false);
            }
        }





        function animate_stack(obj, y, z) {

            var new_y = $(obj).data('translate_y') + y;
            var new_z = $(obj).data('translate_z') + z;

            obj.style['-webkit-transform'] = 'translate3d(0px, ' + new_y + 'px, ' + new_z + 'px)';
            obj.style['-moz-transform'] = 'translate3d(0px, ' + new_y + 'px, ' + new_z + 'px)';
            $(obj).data('translate_y', new_y)
            .data('translate_z', new_z);

        }


    })(jQuery);
    </script>
4

1 に答える 1

0

setInterval メソッドを使用できませんか:

function timer()
 {
  setInterval(function(){nextImg()},5000);
 }

function nextImg()
{
 // whatever code you have written for next.bind
}
于 2012-10-01T07:17:16.433 に答える