javascript - 带切换按钮的幻灯片(自动/步进)

Question

我在 javascript 和 css(没有 jquery 或其他任何东西)中的幻灯片作业有问题。

此幻灯片应该有两种模式，一种是 i) 自动显示图片，另一种是 ii) 手动更改它们。该按钮应分别更改。两种模式都可以正常工作，但我的切换按钮不...

感谢任何帮助!

这是我的代码:

CSS

   <style type="text/css">
   body { padding-top: 2%; }
   div {border:solid red 1px; width:550px; padding:10px ; text-align:center;}
   textarea {background-color: #ccc;}
   .Slides {display : none; }
   </style>

HTML

<form id="form1" name="form1" method = "GET" action="">
    <input type = "text" id="current" name="s" value=""   />
    <input type = "button" value="PREVIOUS" onclick="myClick_previous()" />
    <input type = "button" value="NEXT" onclick="myClick()" />
    <!-- <input type = "button" value="STEP" id="step" onclick="ToggleButton" /> -->
    <button class="controls" id="pause">Pause</button>


</form>
<div id="container" >
simple SLIDE SHOW
    <img id="Slide001" class="Slides" src="slides/Slide001.jpg" />
    <img id="Slide002" class="Slides" src="slides/Slide002.jpg" />   
    <img id="Slide003" class="Slides" src="slides/Slide003.jpg" />
    <img id="Slide004" class="Slides" src="slides/Slide004.jpg" />   
    <img id="Slide005" class="Slides" src="slides/Slide005.jpg" />
    <img id="Slide006" class="Slides" src="slides/Slide006.jpg" /> 
    <textarea id="TimeLineInfos" name="TimeLineInfos" rows="4" cols="50" ></textarea>
</div>

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>

Answer 1

我终于找到了...答案比我想象的要简单!(我只是张贴它以防有人需要它作为示例...)

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>