Javascript 带切换按钮的幻灯片放映（自动/单步）

我在javascript和css（没有jquery或其他任何东西）中的幻灯片演示作业有问题

此幻灯片应具有两种模式：一种是自动模式，可自行显示图片；另一种是手动更改图片。按钮应分别更改。 两种模式都可以正常工作，但我的切换按钮不能

感谢您的帮助

这是我的密码：

CSS

正文{填充顶部：2%；}
div{边框：纯红1px；宽度：550px；填充：10px；文本对齐：居中；}
text区域{背景色：#ccc；}
.Slides{显示：无；}

HTML

暂停
简单幻灯片放映

Javascript

<script>
var currentSlide = 1;
document.getElementById('Slide001').style.display = "inline" ;
document.getElementById('current').value = 'Slide00' + (currentSlide +0);
document.getElementById('TimeLineInfos').value = 'Slide00'+currentSlide + ' : ' + TimeEst() + '\n';

function myClick(){
    var t = TimeEst()
    currentSlide += 1 ; 
    if ( currentSlide != 7 ) {
        var currentID  = 'Slide00'+currentSlide ;
        var previousID = 'Slide00'+(currentSlide - 1) ;
    } 
    if ( currentSlide == 7 ) {
        currentSlide = 1 
        var currentID  = 'Slide001' 
        var previousID = 'Slide006' 
    }        
    document.getElementById(previousID).style.display = "none" ;    
    document.getElementById(currentID).style.display = "inline" ;
    document.getElementById('current').value = currentID;
    document.getElementById('TimeLineInfos').value += currentID + ' : ' + t + '\n';   
    //sendTimeLine(currentID,t);
    //document.form1.submit();
}

function myClick_previous(){
    var t = TimeEst()
    currentSlide -= 1 ; 
    if ( currentSlide != 0 ) {
        var currentID  = 'Slide00'+currentSlide ;
        var previousID = 'Slide00'+(currentSlide + 1) ;
    } 
    if ( currentSlide == 0 ) {
        currentSlide = 6
        var currentID  = 'Slide006' 
        var previousID = 'Slide001' 
    }        
    document.getElementById(previousID).style.display = "none" ;    
    document.getElementById(currentID).style.display = "inline" ;
    document.getElementById('current').value = currentID;
    document.getElementById('TimeLineInfos').value += currentID + ' : ' + t + '\n';   

}

var myIndex = 0;
slide();
var timer;

function slide() {
    var i;
    var x = document.getElementsByClassName("Slides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
   timer=setTimeout(slide, 3000); // Change image every 3seconds
}



   //from down here is my problematic code
var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow(){
    pauseButton.innerHTML = 'Play';
    playing = false;
    clearInterval(timer);
}

function playSlideshow(){
    pauseButton.innerHTML = 'Pause';
    playing = true;
    slideInterval = setInterval(slide,3000);
}

pauseButton.onclick = function(){
    if(playing){ pauseSlideshow(); }
    else{ slide(); }
}; 

function TimeEst(){
    var d = new Date();
    var t = d.getTime() ;// + "." + d.getMilliseconds();
    return t;
}  
</script>

var currentSlide=1；
document.getElementById（'Slide001'）.style.display=“inline”；
document.getElementById（'current'）。值='Slide00'+（currentSlide+0）；
document.getElementById（'TimeLineInfos'）。值='Slide00'+currentSlide+'：'+TimeEst（）+'\n'；
函数myClick（）{
var t=TimeEst（）
电流滑动+=1；
如果（当前幻灯片！=7）{
var currentID='Slide00'+currentSlide；
var-previousID='Slide00'+（当前幻灯片-1）；
} 
如果（当前幻灯片==7）{
currentSlide=1
var currentID='Slide001'
var previousID='Slide006'
}        
document.getElementById（previousID）.style.display=“无”；
document.getElementById（currentID）.style.display=“inline”；
document.getElementById（'current'）。value=currentID；
document.getElementById（'TimeLineInfos'）。value+=currentID+'：'+t+'\n'；
//sendTimeLine（当前ID，t）；
//文件。表格1。提交（）；
}
函数myClick_previous（）{
var t=TimeEst（）
电流滑动-=1；
如果（当前幻灯片！=0）{
var currentID='Slide00'+currentSlide；
var previousID='Slide00'+（currentSlide+1）；
} 
如果（当前幻灯片==0）{
当前幻灯片=6
var currentID='Slide006'
var previousID='Slide001'
}        
document.getElementById（previousID）.style.display=“无”；
document.getElementById（currentID）.style.display=“inline”；
document.getElementById（'current'）。value=currentID；
document.getElementById（'TimeLineInfos'）。value+=currentID+'：'+t+'\n'；
}
var-myIndex=0；
幻灯片（）；
无功定时器；
函数幻灯片（）{
var i；
var x=document.getElementsByClassName（“幻灯片”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
timer=setTimeout（幻灯片，3000）；//每3秒更改一次图像
}
//下面是我的问题代码
var=true；
var pauseButton=document.getElementById（'pause'）；
函数pauseSlideshow（）{
pauseButton.innerHTML='Play'；
玩=假；
清除间隔（计时器）；
}
函数playsileshow（）{
pauseButton.innerHTML='Pause'；
玩=真；
slideInterval=设置间隔（slide，3000）；
}
pauseButton.onclick=函数（）{
如果（播放）{pauseSlideshow（）；}
else{slide（）；}
}; 
函数TimeEst（）{
var d=新日期（）；
var t=d.getTime（）；//+“+d.getmillizes（）；
返回t；
}  

我终于找到了……答案比我想象的要简单！（我只是把它贴出来，以防有人需要它作为一个例子…）

HTML、CSS保持不变，只是Javascript有所改变

我们开始：

<script>
var currentSlide = 1;
var flag=1;
document.getElementById('Slide001').style.display = "inline" ;
document.getElementById('current').value = 'Slide00' + (currentSlide +0);
document.getElementById('TimeLineInfos').value = 'Slide00'+currentSlide + ' : ' + TimeEst() + '\n';


var timer = setInterval(function(){ myClick_next(); }, 3000);
var playing=true;

function toggle()
{
    if(playing==true)
    {
        playing=false;
        clearInterval(timer);
        document.getElementById("STEP").value = "AUTO";
    }
    else
    {
        playing=true;
        timer=setInterval(function(){ myClick_next(); }, 3000);
        document.getElementById("STEP").value = "STEP";
    }
}

document.getElementById("BACK").disabled = true;

function myClick_next(){
    var t = TimeEst()
    currentSlide += 1 ; 
    document.getElementById("BACK").disabled = false;
    if ( currentSlide != 7 ) {      
        var currentID  = 'Slide00'+currentSlide ;
        var previousID = 'Slide00'+(currentSlide - 1) ;
    } 
    if ( currentSlide == 7 ) {
        currentSlide = 1 
        var currentID  = 'Slide001' 
        var previousID = 'Slide006' 
    }        
    document.getElementById(previousID).style.display = "none" ;    
    document.getElementById(currentID).style.display = "inline" ;
    document.getElementById('current').value = currentID;
    document.getElementById('TimeLineInfos').value += currentID + ' : ' + t + '\n';   
    //sendTimeLine(currentID,t);
    //document.form1.submit();
}


function myClick_previous(){
    var t = TimeEst()
    currentSlide -= 1 ; 
    if ( currentSlide != 0 ) {
        var currentID  = 'Slide00'+currentSlide ;
        var previousID = 'Slide00'+(currentSlide + 1) ;
    } 
    if ( currentSlide == 1 ) {
        document.getElementById("BACK").disabled = true;
        //currentSlide = 6 
        //var currentID  = 'Slide006' 
        //var previousID = 'Slide001' 
    }        
    document.getElementById(previousID).style.display = "none" ;    
    document.getElementById(currentID).style.display = "inline" ;
    document.getElementById('current').value = currentID;
    document.getElementById('TimeLineInfos').value += currentID + ' : ' + t + '\n';   
    //sendTimeLine(currentID,t);
    //document.form1.submit();
}

function TimeEst(){
    var d = new Date();
    var t = d.getTime() ;// + "." + d.getMilliseconds();
    return t;
}  


</script>

var currentSlide=1；
var标志=1；
document.getElementById（'Slide001'）.style.display=“inline”；
document.getElementById（'current'）。值='Slide00'+（currentSlide+0）；
document.getElementById（'TimeLineInfos'）。值='Slide00'+currentSlide+'：'+TimeEst（）+'\n'；
var timer=setInterval（函数（）{myClick_next（）；}，3000）；
var=true；
函数切换（）
{
如果（播放==真）
{
玩=假；
清除间隔（计时器）；
document.getElementById（“步骤”）.value=“自动”；
}
其他的
{
玩=真；
计时器=设置间隔（函数（）{myClick_next（）；}，3000）；
document.getElementById（“步骤”）.value=“步骤”；
}
}
document.getElementById（“BACK”）.disabled=true；
函数myClick_next（）{
var t=TimeEst（）
电流滑动+=1；
document.getElementById（“BACK”）.disabled=false；
如果（当前幻灯片！=7）{
var currentID='Slide00'+currentSlide；
var-previousID='Slide00'+（当前幻灯片-1）；
} 
如果（当前幻灯片==7）{
currentSlide=1
var currentID='Slide001'
var previousID='Slide006'
}        
document.getElementById（previousID）.style.display=“无”；
document.getElementById（currentID）.style.display=“inline”；
document.getElementById（'current'）。value=currentID；
document.getElementById（'TimeLineInfos'）。value+=currentID+'：'+t+'\n'；
//sendTimeLine（当前ID，t）；
//文件。表格1。提交（）；
}
函数myClick_previous（）{
var t=TimeEst（）
电流滑动-=1；
如果（当前幻灯片！=0）{
var currentID='Slide00'+currentSlide；
var previousID='Slide00'+（currentSlide+1）；
} 
如果（当前幻灯片==1）{
document.getElementById（“BACK”）.disabled=true；
//当前幻灯片=6
//var currentID='Slide006'
//var previousID='Slide001'
}        
document.getElementById（previousID）.style.display=“无”；
document.getElementById（currentID）.style.display=“inline”；
document.getElementById（'current'）。value=currentID；
document.getElementById（'TimeLineInfos'）。value+=currentID+'：'+t+'\n'；
//sendTimeLine（当前ID，t）；
//文件。表格1。提交（）；
}
函数TimeEst（）{
var d=新日期（）；
var t=d.getTime（）；//+“+d.getmillizes（）；
返回t；
}  

<script>
var currentSlide = 1;
document.getElementById('Slide001').style.display = "inline" ;
document.getElementById('current').value = 'Slide00' + (currentSlide +0);
document.getElementById('TimeLineInfos').value = 'Slide00'+currentSlide + ' : ' + TimeEst() + '\n';

function myClick(){
    var t = TimeEst()
    currentSlide += 1 ; 
    if ( currentSlide != 7 ) {
        var currentID  = 'Slide00'+currentSlide ;
        var previousID = 'Slide00'+(currentSlide - 1) ;
    } 
    if ( currentSlide == 7 ) {
        currentSlide = 1 
        var currentID  = 'Slide001' 
        var previousID = 'Slide006' 
    }        
    document.getElementById(previousID).style.display = "none" ;    
    document.getElementById(currentID).style.display = "inline" ;
    document.getElementById('current').value = currentID;
    document.getElementById('TimeLineInfos').value += currentID + ' : ' + t + '\n';   
    //sendTimeLine(currentID,t);
    //document.form1.submit();
}

function myClick_previous(){
    var t = TimeEst()
    currentSlide -= 1 ; 
    if ( currentSlide != 0 ) {
        var currentID  = 'Slide00'+currentSlide ;
        var previousID = 'Slide00'+(currentSlide + 1) ;
    } 
    if ( currentSlide == 0 ) {
        currentSlide = 6
        var currentID  = 'Slide006' 
        var previousID = 'Slide001' 
    }        
    document.getElementById(previousID).style.display = "none" ;    
    document.getElementById(currentID).style.display = "inline" ;
    document.getElementById('current').value = currentID;
    document.getElementById('TimeLineInfos').value += currentID + ' : ' + t + '\n';   

}

var myIndex = 0;
slide();
var timer;

function slide() {
    var i;
    var x = document.getElementsByClassName("Slides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
   timer=setTimeout(slide, 3000); // Change image every 3seconds
}



   //from down here is my problematic code
var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow(){
    pauseButton.innerHTML = 'Play';
    playing = false;
    clearInterval(timer);
}

function playSlideshow(){
    pauseButton.innerHTML = 'Pause';
    playing = true;
    slideInterval = setInterval(slide,3000);
}

pauseButton.onclick = function(){
    if(playing){ pauseSlideshow(); }
    else{ slide(); }
}; 

function TimeEst(){
    var d = new Date();
    var t = d.getTime() ;// + "." + d.getMilliseconds();
    return t;
}  
</script>

<script>
var currentSlide = 1;
var flag=1;
document.getElementById('Slide001').style.display = "inline" ;
document.getElementById('current').value = 'Slide00' + (currentSlide +0);
document.getElementById('TimeLineInfos').value = 'Slide00'+currentSlide + ' : ' + TimeEst() + '\n';


var timer = setInterval(function(){ myClick_next(); }, 3000);
var playing=true;

function toggle()
{
    if(playing==true)
    {
        playing=false;
        clearInterval(timer);
        document.getElementById("STEP").value = "AUTO";
    }
    else
    {
        playing=true;
        timer=setInterval(function(){ myClick_next(); }, 3000);
        document.getElementById("STEP").value = "STEP";
    }
}

document.getElementById("BACK").disabled = true;

function myClick_next(){
    var t = TimeEst()
    currentSlide += 1 ; 
    document.getElementById("BACK").disabled = false;
    if ( currentSlide != 7 ) {      
        var currentID  = 'Slide00'+currentSlide ;
        var previousID = 'Slide00'+(currentSlide - 1) ;
    } 
    if ( currentSlide == 7 ) {
        currentSlide = 1 
        var currentID  = 'Slide001' 
        var previousID = 'Slide006' 
    }        
    document.getElementById(previousID).style.display = "none" ;    
    document.getElementById(currentID).style.display = "inline" ;
    document.getElementById('current').value = currentID;
    document.getElementById('TimeLineInfos').value += currentID + ' : ' + t + '\n';   
    //sendTimeLine(currentID,t);
    //document.form1.submit();
}


function myClick_previous(){
    var t = TimeEst()
    currentSlide -= 1 ; 
    if ( currentSlide != 0 ) {
        var currentID  = 'Slide00'+currentSlide ;
        var previousID = 'Slide00'+(currentSlide + 1) ;
    } 
    if ( currentSlide == 1 ) {
        document.getElementById("BACK").disabled = true;
        //currentSlide = 6 
        //var currentID  = 'Slide006' 
        //var previousID = 'Slide001' 
    }        
    document.getElementById(previousID).style.display = "none" ;    
    document.getElementById(currentID).style.display = "inline" ;
    document.getElementById('current').value = currentID;
    document.getElementById('TimeLineInfos').value += currentID + ' : ' + t + '\n';   
    //sendTimeLine(currentID,t);
    //document.form1.submit();
}

function TimeEst(){
    var d = new Date();
    var t = d.getTime() ;// + "." + d.getMilliseconds();
    return t;
}  


</script>