Irgendwelche Ideen, wie ich meine vorherigen und nächsten Knöpfe auf beiden Seiten des Bildes machen kann?

Wie kann ich meine vorherigen und nächsten Schaltflächen auf beiden Seiten des Bildes machen? Dies ist mein Code:Irgendwelche Ideen, wie ich meine vorherigen und nächsten Knöpfe auf beiden Seiten des Bildes machen kann?

<head> 
 
    <title>change picture</title> 
 
    <script type="text/javascript"> 
 
    function displayNextImage() { 
 
     x = (x === images.length - 1) ? 0 : x + 1; 
 
     document.getElementById("img").src = images[x]; 
 
    } 
 

 
    function displayPreviousImage() { 
 
     x = (x <= 0) ? images.length - 1 : x - 1; 
 
     document.getElementById("img").src = images[x]; 
 
    } 
 

 
    function startTimer() { 
 
     setInterval(displayNextImage, 5000); 
 
    } 
 

 
    var images = [], 
 
     x = -1; 
 

 

 
<script type="text/javascript"> 
 
<!-- 
 
var imlocation = "images/"; 
 
var currentdate = 0; 
 
var image_number = 0; 
 
function ImageArray (n) { 
 
    this.length = n; 
 
    for (var i =1; i <= n; i++) { 
 
    this[i] = ' ' 
 
    } 
 
} 
 
image = new ImageArray(3) 
 

 

 

 
     
 
    images[0] = ""; 
 
    images[1] = ""; 
 
    images[2] = ""; 
 
    images[3] = ""; 
 
    
 
var rand = 60/image.length 
 
function randomimage() { 
 
    currentdate = new Date() 
 
    image_number = currentdate.getSeconds() 
 
    image_number = Math.floor(image_number/rand) 
 
    return(image[image_number]) 
 
} 
 
document.write("<img src='" + imlocation + randomimage()+ "'>"); 
 
//--> 
 
</script> 
 
    
 
    </script> 
 
</head> 
 

 
<body onload="startTimer()"> 
 
    <center><div id="img-box"> 
 
    <img id="img" src="" /> 
 
    </div></center> 
 
    
 
    
 
    <button class="button button400" onclick="displayPreviousImage()">Previous</button> 
 

 
       
 
     <button class="button button400"onclick="displayNextImage()">Next</button> 
 
</body>

Quelle

2016-04-11 jorswag3

entfernt Flaum, aber die Frage verdient noch geschlossen zu werden. – mustaccio

Sie müssen einige der Elemente wie folgt neu zu ordnen:

<body onload="startTimer()"> 
     <button class="box button button400" onclick="displayPreviousImage()">Previous</button> 

     <div class="box" id="img-box"> 
      <img width="200" height="100" id="img" src="" /> 
     </div> 

     <button class="box button button400" onclick="displayNextImage()">Next</button> 
    </body>

und CSS-Skript hinzu:

.box { 
    display: inline-block; 
    vertical-align: middle; 
}

JSFiddle: Here

Quelle

2016-04-11 04:03:04

Irgendwelche Ideen, wie ich meine vorherigen und nächsten Knöpfe auf beiden Seiten des Bildes machen kann?

Antwort

Verwandte Themen