スライドショーとトグルボタン（自動/ステップ）

Question

javascriptとcss（jqueryやその他のものはありません）でスライドショーの宿題に問題があります。

このスライドショーには、i）自動で画像を表示する2つのモードと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>