How Do I make it so that when I click Next It will go to the next array image and when I click Previous it will go to the previous array image. I am trying to make a image slide show that has two buttons. one to go to the next picture and one to go to the previous picture
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var images = new Array(7);
images[0] = "Images/lab1.jpeg";
images[1] = "Images/lab2.jpeg";
images[2] = "Images/lab3.jpeg";
images[3] = "Images/lab4.jpeg";
images[4] = "Images/lab5.jpeg";
images[5] = "Images/lab6.jpeg";
images[6] = "Images/lab7.jpeg";
images[7] = "Images/lab8.jpeg";
var num_img = 7;
var cur_img = 1;
function goback() {
if(cur_img>0)
{
cur_img = cur_img - 1;
}else{
alert("This is the first image");
}
}
function gofwd(){
if(cur_img < num_img){
cur_img = cur_img + 1;
}else{
alert("This is the last image");
}
}
</script>
</script>
</head>
<body>
<div style="border: solid 12px blue; width: 500px; height: 500px;">
<img src="Images/lab1.jpeg" alt="lab1" height="500" width="500">
</div><br>
<input type="button" value="PREVIOUS" id="prev" name="prev" style="color:blue" onclick="goback();" >
<input type="button" value="NEXT" id="next" name="next" style="color:blue" onclick="gofwd();" >
</body>
</html>
First of all
switch is a keyword in javascript so you can not use it as an identifier. So rename you array of images. give an id to your image in the HTML and then try the code below.
<script>
var images = new Array(7);
images[0] = "Images/lab1.jpeg";
images[1] = "Images/lab2.jpeg";
images[2] = "Images/lab3.jpeg";
images[3] = "Images/lab4.jpeg";
images[4] = "Images/lab5.jpeg";
images[5] = "Images/lab6.jpeg";
images[6] = "Images/lab7.jpeg";
var numimg = 7;
var curimg = 1;
function goback() {
var im=document.getElementById("image");
if(curimg>0)
{
im.src = images[curimg-1];
curimg = curimg - 1;
}else{
alert("This is the first image");
}
}
function gofwd(){
var im=document.getElementById("image");
if(curimg < numimg){
im.src = images[curimg+1];
curimg = curimg + 1;
}else{
alert("This is the last image");
}
}
</script>
The HTMl will be like
<div style="border: solid 12px blue; width: 500px; height: 500px;">
<img src="Images/lab1.jpg" alt="lab1" height="500" width="500" id="image" />
</div><br>
<input type="button" value="PREVIOUS" id="prev" name="prev" onclick="goback();" >
<input type="button" value="NEXT" id="next" name="next" onclick="gofwd();" >
Related
I've made this code to make a game that counts the number of clicks on the moving image .. but i can't make the Countdown or the counter .. i want when the user press start the game an countdown begins .. and every click on the image the number in (the counter) increased by one .. Thnx
var x_position = 0 ;
var theSpace = document.getElementById("gamespace");
var textt=document.getElementById("text");
var theMission = document.createTextNode(" - Press the tree as fast as you can ");
var theTree = document.createElement("img");
var moving;
function movingf() {
theSpace.appendChild(theTree);
theTree.style.left=Math.floor(Math.random() * 401) + "px";
theTree.style.right=Math.floor(Math.random() * 401) + "px";
theTree.style.top=Math.floor(Math.random() * 401) + "px";
theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
moving=setTimeout(movingf,500);
theTree.addEventListener("click",theCounter);
}
function theGame() {
textt.style.clear="both";
theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
theTree.style.position="absolute";
theSpace.appendChild(theTree);
textt.appendChild(theMission);
moving=setTimeout(movingf,50);
theTree.onclick = theCounter();
}
function theCounter() {
var time = 0;
time = time + 1 ;
var theCount = document.getElementById("times").innerHTML=time;
}
#gamespace{
border:2px solid black ;
width:500px;
height:500px;
top:215px;}
p{position:absolute;
border:1px solid black;}
button{position:absolute;
top:60px;}
#here{position:absolute;
top:45px;
}
<h1> PICTURE GAME .. </h1>
<button id="start" onclick="theGame()"> Press here to start the game</button>
<div id="here">
<form action="/action_page.php" id="here">
The countdown :
<input type="text" name="firstname" value="0" >
The counter :
<input type="text" name="lastname" value="0">
</form>
</div>
<p id="text" style="top:170px"></p>
<div id="gamespace" style="position:absolute"> </div>
You have an error in your javascript :
"message": "Uncaught TypeError: Cannot set property 'innerHTML' of null",
here :
var theCount = document.getElementById("times").innerHTML=time;
You have no element with the id = "times", so if you want the <p> element to contain the count, change the line to :
var theCount = document.getElementById("text").innerHTML=time;
Also, theCounter() function should be like this :
function theCounter() {
time = time + 1 ;
document.getElementById("text").innerHTML=time;
}
var x_position = 0 ;
var theSpace = document.getElementById("gamespace");
var textt=document.getElementById("text");
var theMission = document.createTextNode(" - Press the tree as fast as you can ");
var theTree = document.createElement("img");
var moving ;
var time = 0;
function movingf() {
theSpace.appendChild(theTree);
theTree.style.left=Math.floor(Math.random() * 401) + "px";
theTree.style.right=Math.floor(Math.random() * 401) + "px";
theTree.style.top=Math.floor(Math.random() * 401) + "px";
theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
moving=setTimeout(movingf,500);
theTree.addEventListener("click",theCounter);
}
function theGame() {
textt.style.clear="both";
theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
theTree.style.position="absolute";
theSpace.appendChild(theTree);
textt.appendChild(theMission);
moving=setTimeout(movingf,50);
theTree.onclick = theCounter();
}
function theCounter() {
time = time + 1 ;
document.getElementById("text").innerHTML=time;
}
#gamespace {
border: 2px solid black ;
width: 500px;
height: 500px;
top: 215px;
}
p {
position: absolute;
border: 1px solid black;
}
button {
position: absolute;
top: 60px;
}
#here {
position: absolute;
top: 45px;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h1> PICTURE GAME .. </h1>
<button id="start" onclick="theGame()"> Press here to start the game</button>
<div id="here">
<form action="/action_page.php" id="here">
The countdown :
<input type="text" name="firstname" value="0" >
The counter :
<input type="text" name="lastname" value="0">
</form>
</div>
<p id="text" style="top:170px"></p>
<div id="gamespace" style="position:absolute"> </div>
</body>
You were trying to reset your counter inside the theCounter function each time it was called, also tried to set innerHTML of element with id that was not in your markup. After fixing this this you can use setInterval to implement timer countdown:
var x_position = 0 ;
var theSpace = document.getElementById("gamespace");
var textt=document.getElementById("text");
var theMission = document.createTextNode(" - Press the tree as fast as you can ");
var theTree = document.createElement("img");
var moving;
function movingf() {
theTree.style.left=Math.floor(Math.random() * 401) + "px";
theTree.style.right=Math.floor(Math.random() * 401) + "px";
theTree.style.top=Math.floor(Math.random() * 401) + "px";
theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
}
var clicks = 0, gameTimer, movingfTimer, timeleft;
theSpace.appendChild(theTree);
function theGame() {
clicks = 0;
timeleft = 30;
document.getElementById("times").value = clicks;
document.getElementById("countdown").value = timeleft;
textt.style.clear="both";
theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
theTree.style.position="absolute";
theSpace.appendChild(theTree);
textt.appendChild(theMission);
theTree.addEventListener("click", theCounter);
movingf();
clearInterval(movingfTimer);
clearInterval(gameTimer);
movingfTimer = setInterval(movingf, 500);
gameTimer = setInterval(function(){
timeleft--;
document.getElementById("countdown").value = timeleft;
if(timeleft <= 0){
clearInterval(gameTimer);
clearInterval(movingfTimer);
theTree.removeEventListener("click", theCounter);
}
}, 1000);
}
function theCounter() {
clicks++;
document.getElementById("times").value = clicks;
}
#gamespace {
border:2px solid black ;
width:500px;
height:500px;
top:215px;
}
p {
position:absolute;
border:1px solid black;
}
button {
position:absolute;
top:60px;
}
#here {
position:absolute;
top:45px;
}
<h1> PICTURE GAME .. </h1>
<button id="start" onclick="theGame()"> Press here to start the game</button>
<div id="here">
<form action="/action_page.php" id="here">
The countdown :
<input type="text" name="countdown" id="countdown" />
The counter :
<input type="text" name="times" id="times" value="0" />
</form>
</div>
<p id="text" style="top:170px"></p>
<div id="gamespace" style="position:absolute"> </div>
I am trying to shift my pictures to the left using jQuery. I am using a while statement to change all pictures. Here is my code:
<script language="javascript">
$(function() {
$("#leftButton").click(function() {
var imglength = $("#content").children("img").length;
var iterations = imglength;
var lastimg = imglength-1;
var nextimg = lastimg-1;
var start = 1;
var text = "";
document.getElementById("Number").innerHTML="The number of pictures is " + imglength;
document.getElementById("Number1").innerHTML="The index of the last image is " + lastimg;
while (start < iterations)
{
var last = $("img:eq('lastimg')").attr("src");
var next = $("img:eq('nextimg')").attr("src");
text += "<br>Iteration: " + imgindex + " and nextimg is:" +nextimg;
$("img:eq('lastimg')").attr('src', next);
start++;
nextimg--;
}
document.getElementById("Number2").innerHTML = text;
})
})
</script>
HTML is here:
Imgae Shift
Left Shift
Pictures
<p id="Number">Number</p>
<p id="Number1">Number</p>
<p id="Number2">Number</p>
<div id="result"></div>
</section>
</section>
<footer>
© Matthew King: 2015, Birmingham, AL 35211
</footer>
</body>
</html>
It might be easier to simply append the first image back to its parent. This should remove it and add it back as the last child. In the demo, each image has a border so you can see what is happening. I am guessing this is what you are after, but if not let me know.
function slideKittens(){
var first = document.querySelector("#kittens > img");
first.parentNode.appendChild(first);
}
setInterval(slideKittens, 1 * 1000);
#kittens img {
border: solid 2px black;
margin: 2px;
padding: 0px;
display: inline-block;
float: left;
}
<div id="kittens" style="overflow: hidden; width:333px; height: 108px">
<img src="http://placekitten.com/100/100" style="border-color: black;" />
<img src="http://placekitten.com/100/100" style="border-color: red;" />
<img src="http://placekitten.com/100/100" style="border-color: green;" />
<img src="http://placekitten.com/100/100" style="border-color: blue;" />
</div>
The problem is that you do not use the variables correctly.
The lines
var last = $("img:eq('lastimg')").attr("src");
var next = $("img:eq('nextimg')").attr("src");
$("img:eq('lastimg')").attr('src', next);
should be
var last = $("img:eq('" + lastimg + "')").attr("src");
var next = $("img:eq('" + nextimg+ "')").attr("src");
$("img:eq('" + lastimg +"')").attr('src', next);
i have slideshow which i want to start with start() and stop with stop(). but it doesn't work. I have defined everything, included stop and start functions. Below i typed my html and javascript codes. When i click on Start button, it doesn't go automatically, i must click each time to get it in process
<DOCTPYPE! >
<html>
<head>
<style>
#imgs img {
float: center;
box-shadow: 5px;
}
input {
float: left;
margin-left: 20px;
}
input:last-child {
margin-left:5px;
}
</style>
<script src="ghgh.js"></script>
</head>
<body>
<div >
<img src="1.jpg" id="myPhoto" style="width: 600px; height: 400px;" />
</div>
<input type="button" value="start" onClick="start();" />
<input type="button" value="stop" onClick="stop();" />
<body>
</html>
javascript:
var myImage = document.getElementById("myPhoto");
var imageArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
var imageIndex = 0;
function start () {
myPhoto.setAttribute("src", imageArray [imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
var intervalHandle = setInterval (start (), 2000);
function stop() {
clearInterval(intervalHandle);
}
Try this :
var myImage = document.getElementById("myPhoto");
var imageArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
var imageIndex = 0;
var is_stop = 0;
var time = 0;
function start () {
is_stop =0;
myPhoto.setAttribute("src", imageArray [imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length) {
imageIndex = 0;
}
if(!is_stop){
time = setTimeout(start, 2000);
}
}
function stop() {
is_stop = 1;
if(time){
clearTimeout(time);
}
}
I am trying to race two cars when a button is pushed. I want them to move at different speeds.
I am using startRaceButton.onClick to run my two start race functions which set intervals for my images to move. I also have it set to clear the interval after it reaches the finish line.
The problem I am having is, when the button is clicked nothing happens.
<script type="text/javascript">
window.onload = function() {
var redSpeed = 1*(Math.floor((Math.random() * 10) + 1));
var blueSpeed = 1*(Math.floor((Math.random() * 10) + 1));
var blueLeft = 81;
var redLeft = 81;
var redInterval = 10;
var blueInterval = 10;
var redTimer;
var blueTimer;
var startRaceButton = document.getElementById("imgStartButton");
var redCar = document.getElementById("imgRedCar");
var blueCar = document.getElementById("imgBlueCar");
var goRed = function() {
redCar.style.left = redLeft + "px";
redLeft += redSpeed;
if (redLeft > 899) {
clearInterval(redTimer);
}
}
var goBlue = function() {
blueCar.style.left = blueLeft + "px";
blueLeft += blueSpeed;
if (blueLeft > 899) {
clearInterval(blueTimer);
}
}
var startRed = function() {
redTimer = setInterval(goRed, redInterval);
}
var startBlue = function() {
blueTimer = setInterval(goBlue, blueInterval);
}
startRaceButton.onclick = function() {
startRed();
startBlue();
}
</script>
</head>
<body>
<div style= "display:block; margin:0; padding:0; width:1005px; height:400px;" id="container">
<div id="left" style= "float:left; display:block; margin:0; padding:0; width:80px; height:400px">
<img id="imgStartButton" src="http://ondemandweb.pbworld.net/pbucontent/images/GOButton.jpg" width="60" height="60" >
</div>
<div id="box" style="float:left; display:block; margin:0; padding:0; width:920px; height:400px;">
<img id="imgBlueCar" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTxJr8SKga0S-nM4JgzlIXk6XrmgN8fwdDbvA6tKGWV65fmeaYWDA" style="position:absolute; left:81px; top:100px" width="100" height="60" alt="blue">
<img id="imgRedCar" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8nsZ52wkuxrlT3aiqFicu_YYOVJ1hSKCI2-0MY6G4QKSGHIj4tw" style="position:absolute; left:81px; top:250px" width="100" height="60" alt="red">
</div>
<div id="right" style="float:left; display:block; margin:0; padding:0; width:5px; height:400px; background-color:black; ">
</div>
</div>
</body>
your script is running before your DOM loads. Therefore your bindings don't have meaning.
try including the script after the body of your html.
I have 3 images and I want to change those images by clicking arrow image but I have a problem with that.
I created some tracers to hold the pictures adresses but it doesn't work.
When I use this function, it just changes the picture from first to third picture. So I can't show that 3 pictures in a row.
What I need is that when I click the arrow image to change the pictures in a row like first picture, second picture and third picture.
function change(){
img_tracer = new Array () ;
img_tracer[0] = '1';
img_tracer[1] = '2';
img_tracer[2] = '3';
images = new Array ();
images[0] = document.getElementById('tech').src = "images1.jpg";
images[1] = document.getElementById('tech').src = "images2.jpg";
images[2] = document.getElementById('tech').src = "images3.jpg";
if ( images[0] )
img_tracer[0];
else if ( images[1] )
img_tracer[1];
else if ( images[2] )
img_tracer[2];
var arrow1 = document.getElementById('arr1');
if ( arrow1 ) {
if (img_tracer[0])
images[1];
else if (img_tracer[1])
images[2];
else if (img_tracer[2])
images[2];
}
}
<table align="center">
<tr><td width="100px;" id="arr1" name="arr1" background="imagesright.jpg"onclick="change()"></td><td>
<img src="images1.jpg" alt="Technology" id="tech" name="tech" align="middle" /></td>
<td width="100px;" id="arr2" name="arr2" background="imagesleft.jpg" style="background-repeat: no-repeat" onclick="change()">
</td></tr>
</table>
I'd appreciate if you'd help me.
I think this is what you're looking for: http://jsfiddle.net/xms7v9vv/
HTML:
<table align="center">
<tr><td width="100px;" id="arr1" name="arr1" background="imagesright.jpg"onclick="change(this)"></td><td>
<img src="images1.jpg" alt="Technology" id="tech" name="tech" align="middle" /></td>
<td width="100px;" id="arr2" name="arr2" background="imagesleft.jpg" style="background-repeat: no-repeat" onclick="change(this)">
</td></tr>
</table>
Javascript:
var images = [];
images[0] = "images1.jpg";
images[1] = "images2.jpg";
images[2] = "images3.jpg";
var currentImage = 0;
var change = function(td){
if(td.getAttribute("name") == "arr1"){
// Go left
--currentImage;
if(currentImage == -1)
currentImage = 2;
}else{
// Go right
++currentImage;
if(currentImage == 3){
currentImage = 0;
}
}
document.getElementById('tech').src = images[currentImage];
};
This should be effective enough. You should only have 1 array with all the images and just update the current index.
var currentId = 0;
function setImage(id, src) {
document.getElementById(id).src = src;
}
var images = [
"http://placehold.it/200x160/ff0000/00ffff.png&text=1",
"http://placehold.it/200x160/00ff00/ff00ff.png&text=2",
"http://placehold.it/200x160/0000ff/ffff00.png&text=3"
];
window.change = function(direction) {
currentId += direction;
if (currentId > images.length - 1) {
currentId = 0;
} else if (currentId < 0) {
currentId = images.length-1;
}
setImage('tech', images[currentId]);
}
.nav {
border: thin solid #000;
text-align: center;
font-size: 64px;
font-weight: bold;
}
<table align="center">
<tr>
<td class="nav" width="100px;" id="arr1" name="arr1" onclick="change(-1)"><</td>
<td align="center">
<img src="http://placehold.it/200x160/ff0000/00ffff.png&text=1" alt="Technology" id="tech" name="tech" />
</td>
<td class="nav" width="100px;" id="arr2" name="arr2" onclick="change(1)">></td>
</tr>
</table>