Question

以下代码用于查看飞走的图像。但是你必须点击“下一步”或“上一步”按钮才能实现。我希望它会自动发生，计时器会在每个图像上停止约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>

Answer 1

你不能使用setInterval方法：

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

function nextImg()
{
 // whatever code you have written for next.bind
}

在javascript中自动化next / prev按钮

1 个答案: