添加后退，前进，播放/暂停按钮和setInterval()的窗体

Add buttons Back, Forward, Play / Pause and a form for setInterval()

本文关键字：setInterval 按钮 窗体 暂停 前进 播放 添加      更新时间：2023-09-26

我想做一个简单的幻灯片查询，但我需要添加一些按钮回到上一个幻灯片，前进到下一个，播放/暂停幻灯片和输入表单更改间隔。

我的幻灯片代码:

var tempo = 3000;
var temporizzatore = function() {
  var elemento_visibile = $("ul#slider li").not(".hidden");
  elemento_visibile.addClass("hidden");
  if(elemento_visibile.is(':last-child')) {
    $("ul#slider li:first-child").removeClass("hidden");
  } else {
    elemento_visibile.next().removeClass("hidden");
  }
}
window.setInterval(temporizzatore, tempo);

我找到了按钮的方式…并更改查询代码。但是我不能通过输入

来改变间隔

我的代码…

        $('.ppt li:gt(0)').hide();
        $('.ppt li:last').addClass('last');
        $('.ppt li:first').addClass('first');
        $('#play').hide();
            var cur = $('.ppt li:first');
            var interval;
            var time= 3000;
            function start() {
                interval = setInterval( "forward()", time );
            }
            function stop() {
                clearInterval( interval );
            }
            function forward() {
                cur.fadeOut( 0 );
            if ( cur.attr('class') == 'last' )
                cur = $('.ppt li:first');
            else
                cur = cur.next();
                cur.fadeIn( 0 );
            }
            function goFwd() {
                stop();
                forward();
                start();
            }
            function back() {
                cur.fadeOut( 0 );
            if ( cur.attr('class') == 'first' )
                cur = $('.ppt li:last');
            else
                cur = cur.prev();
                cur.fadeIn( 0 );
            }
            function goBack() {
                stop();
                back();
                start();
            }
            function showPause() {
                $('#play').hide();
                $('#stop').show();
            }
            function showPlay() {
                $('#stop').hide();
                $('#play').show();
            }
            $('#fwd').click( function() {
                goFwd();
                showPause();
            } );
            $('#back').click( function() {
                goBack();   
                showPause();
            } );
            $('#stop').click( function() {
                stop();
                showPlay();
            } );
            $('#play').click( function() {
                start();
                showPause();
            } );
            $(function() {
                start();
            } );
    </script>
相关文章：