首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Javascript autoPlay幻灯片

Javascript autoPlay幻灯片
EN

Stack Overflow用户
提问于 2012-03-22 20:18:30
回答 1查看 2.1K关注 0票数 2

我有一个小小的幻灯片。它可以很好地使用“上一步”和“下一步”按钮。但现在我想制作一个带有播放和暂停按钮的幻灯片。也许你有主意了?

javascript:

代码语言:javascript
复制
 function loadSlide(index){
    $('#gallery li').fadeTo(6000, 1.0);
        $('#gallery li').hide()
    .       eq(index).show();
        }

        $('#gallery').data('index',0).find('li').hide();
            loadSlide(0);

        $('#next').on('click',function(e){
          var index = $('#gallery').data('index'),
           numSlides = $('#gallery li').length;

          index = (index + 1) % numSlides;    
            loadSlide(index);
          $('#gallery').data('index',index);
            e.preventDefault();            
    });
        $('#previous').on('click',function(e){
         var index = $('#gallery').data('index'),
            numSlides = $('#gallery li').length;

            index = (index + numSlides - 1) % numSlides;
                loadSlide(index);
        $('#gallery').data('index',index);
            e.preventDefault();
    });
    $("#gallery li img").css({
                    'height':$("#gallery").height()+'px'
                });
                $("#gallery li").each(function(){
                    $(this).css({
                        'margin-left':'+'+parseInt($(this).children("img").width()/2)+'px'
                });
            });

            $("#gallery li img").css({
                    'height':$("#gallery").height()+'px'
                });
                $("#gallery li").each(function(){
                    $(this).css({
                        'margin-left':'+'+parseInt($(this).children("img").width()/2)+'px'
                });
            });
        }

提前感谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-03-22 20:33:08

没有测试,但是像这样的东西应该可以工作:

代码语言:javascript
复制
$('#start').click( function(){
 t = setInterval( function(){ $('#next').trigger('click'), 2000 } );
});

$('#stop').click( function(){
 clearInterval(t);
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9822130

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档