Question

你好：首先我不知道编码或任何相关的，简单的问题：是否有任何简单的方法来告诉这段代码自动启动幻灯片？在当前时刻，图像随点击而变化。目前索引页面只有一个图像，我想要的是添加一些但不需要点击查看下一个这是我索引的代码：

<script type="text/javascript">
//<![CDATA[
    /*
    the images preload plugin
    */
    (function($) {
        $.fn.preload = function(options) {
            var opts    = $.extend({}, $.fn.preload.defaults, options),
                o       = $.meta ? $.extend({}, opts, this.data()) : opts;
            var c       = this.length,
                l       = 0;
            return this.each(function() {
                var $i  = $(this);
                $('<img/>').load(function(i){
                    ++l;
                    if(l == c) o.onComplete();
                }).attr('src',$i.attr('src'));  
            });
        };
        $.fn.preload.defaults = {
            onComplete  : function(){return false;}
        };
    })(jQuery);
//]]>
</script><script type="text/javascript">
//<![CDATA[
    $(function() {
        var $tf_bg              = $('#tf_bg'),
            $tf_bg_images       = $tf_bg.find('img'),
            $tf_bg_img          = $tf_bg_images.eq(0),
            $tf_thumbs          = $('#tf_thumbs'),
            total               = $tf_bg_images.length,
            current             = 0,
            $tf_content_wrapper = $('#tf_content_wrapper'),
            $tf_next            = $('#tf_next'),
            $tf_prev            = $('#tf_prev'),
            $tf_loading         = $('#tf_loading');

        //preload the images                
        $tf_bg_images.preload({
            onComplete  : function(){
                $tf_loading.hide();
                init();
            }
        });

        //shows the first image and initializes events
        function init(){
            //get dimentions for the image, based on the windows size
            var dim = getImageDim($tf_bg_img);
            //set the returned values and show the image
            $tf_bg_img.css({
                width   : dim.width,
                height  : dim.height,
                left    : dim.left,
                top     : dim.top
            }).fadeIn();

            //resizing the window resizes the $tf_bg_img
            $(window).bind('resize',function(){
                var dim = getImageDim($tf_bg_img);
                $tf_bg_img.css({
                    width   : dim.width,
                    height  : dim.height,
                    left    : dim.left,
                    top     : dim.top
                });
            });

            //expand and fit the image to the screen
            $('#tf_zoom').live('click',
                function(){
                    if($tf_bg_img.is(':animated'))
                        return false;

                    var $this   = $(this);
                    if($this.hasClass('tf_zoom')){
                        resize($tf_bg_img);
                        $this.addClass('tf_fullscreen')
                             .removeClass('tf_zoom');
                    }
                    else{
                        var dim = getImageDim($tf_bg_img);
                        $tf_bg_img.animate({
                            width   : dim.width,
                            height  : dim.height,
                            top     : dim.top,
                            left    : dim.left
                        },350);
                        $this.addClass('tf_zoom')
                             .removeClass('tf_fullscreen'); 
                    }
                }
            );

            //click the arrow down, scrolls down
            $tf_next.bind('click',function(){
                if($tf_bg_img.is(':animated'))
                    return false;
                    scroll('tb');
            });

            //click the arrow up, scrolls up
            $tf_prev.bind('click',function(){
                if($tf_bg_img.is(':animated'))
                    return false;
                scroll('bt');
            });

            //mousewheel events - down / up button trigger the scroll down / up
            $(document).mousewheel(function(e, delta) {
                if($tf_bg_img.is(':animated'))
                    return false;

                if(delta > 0)
                    scroll('bt');
                else
                    scroll('tb');
                return false;
            });

            //key events - down / up button trigger the scroll down / up
            $(document).keydown(function(e){
                if($tf_bg_img.is(':animated'))
                    return false;

                switch(e.which){
                    case 38:    
                        scroll('bt');
                        break;  
                    case 40:    
                        scroll('tb');
                        break;
                }
            });
        }

        //show next / prev image
        function scroll(dir){
            //if dir is "tb" (top -> bottom) increment current, 
            //else if "bt" decrement it
            current = (dir == 'tb')?current + 1:current - 1;

            //we want a circular slideshow, 
            //so we need to check the limits of current
            if(current == total) current = 0;
            else if(current < 0) current = total - 1;

            //flip the thumb
            $tf_thumbs.flip({
                direction   : dir,
                speed       : 400,
                onBefore    : function(){
                    //the new thumb is set here
                    var content = '<span id="tf_zoom" class="tf_zoom"><\/span>';
                    content     +='<img src="' +           $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';
                    $tf_thumbs.html(content);
                }
            });

            //we get the next image
            var $tf_bg_img_next = $tf_bg_images.eq(current),
                //its dimentions
                dim             = getImageDim($tf_bg_img_next),
                //the top should be one that makes the image out of the viewport
                //the image should be positioned up or down depending on the direction
                    top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';

            //set the returned values and show the next image   
                $tf_bg_img_next.css({
                    width   : dim.width,
                    height  : dim.height,
                    left    : dim.left,
                    top     : top
                }).show();

            //now slide it to the viewport
                $tf_bg_img_next.stop().animate({
                    top     : dim.top
                },700);

            //we want the old image to slide in the same direction, out of the viewport
                var slideTo = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
                $tf_bg_img.stop().animate({
                    top     : slideTo
                },700,function(){
                //hide it
                    $(this).hide();
                //the $tf_bg_img is now the shown image
                    $tf_bg_img  = $tf_bg_img_next;
                //show the description for the new image
                    $tf_content_wrapper.children()
                                       .eq(current)
                                       .show();
            });
                //hide the current description  
                    $tf_content_wrapper.children(':visible')
                                       .hide()

            }

            //animate the image to fit in the viewport
            function resize($img){
                var w_w = $(window).width(),
                    w_h = $(window).height(),
                    i_w = $img.width(),
                    i_h = $img.height(),
                    r_i = i_h / i_w,
                    new_w,new_h;

                if(i_w > i_h){
                    new_w   = w_w;
                    new_h   = w_w * r_i;

                    if(new_h > w_h){
                        new_h   = w_h;
                        new_w   = w_h / r_i;
                    }
                }   
                else{
                    new_h   = w_w * r_i;
                    new_w   = w_w;
                }

                $img.animate({
                    width   : new_w + 'px',
                    height  : new_h + 'px',
                    top     : '0px',
                    left    : '0px'
                },350);
            }

            //get dimentions of the image, 
            //in order to make it full size and centered
            function getImageDim($img){
                var w_w = $(window).width(),
                    w_h = $(window).height(),
                    r_w = w_h / w_w,
                    i_w = $img.width(),
                    i_h = $img.height(),
                    r_i = i_h / i_w,
                    new_w,new_h,
                    new_left,new_top;

                if(r_w > r_i){
                    new_h   = w_h;
                    new_w   = w_h / r_i;
                }
                else{
                    new_h   = w_w * r_i;
                    new_w   = w_w;
                }


                return {
                    width   : new_w + 'px',
                    height  : new_h + 'px',
                    left    : (w_w - new_w) / 2 + 'px',
                    top     : (w_h - new_h) / 2 + 'px'
                };
                }
        });
//]]>
</script>

Answer 1

有没有简单......

不：）

查看setTimeout()功能。也许这可能会有所帮助：

Answer 2

简单的方法是设置setTimeout()并使其执行处理“mouseclick”的功能。

当页面加载完毕后，您可以触发此行：

var timer = setTimeout(function(){
    scroll(tb);
}, 2000);

这会在2秒后改变画面。

如果你想继续下去，可以这样做：

//Fire this after page has finished loading
var timer = setTimeout(function(){
    autoChange("tb", 2000);
}, 2000);

//Put this somewhere else
function autoChange(dir, timeout){
    scroll(dir);
    var timer = setTimeout(function(){
        autoChange("tb", 2000);
    }, timeout);
}

这将使图片每2秒更换一次。当用户点击更改图片时，您可以将超时更改为5秒，然后再开始每2秒自动滚动一次。

在W3Schools上阅读setTimeout()。

Answer 3

向下滚动此代码，直至看到MY ANSWER!!!!!!!!

修改我粘贴了一些udpated代码。再试一次。

Answer 4

您可以劫持下一个箭头点击事件以及setInterval，如下所示：

setInterval(function(){
    $tf_next.trigger('click');
}, 2500); // Change 2500 to whatever miliseconds delay you want

祝你好运！

如何自动启动此幻灯片

4 个答案: