This code is a automatic slideshow and i want to make it so when you click next it goes to the next image and back to go to the previous image
My current code:
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "http://www.adactushousing.co.uk/images/upload/coverImage/Local%20Offer%20CCH.jpg"
var image2 = new Image()
image2.src = "http://www.northantspfg.co.uk/resources/uploads/news/wordal13-021142.JPG"
var image3 = new Image()
image3.src = "http://hmstack.files.wordpress.com/2011/07/swimming-for-the-disabled.jpg"
var image4 = new Image()
image4.src = "http://www.northantspfg.co.uk/resources/uploads/news/HiResLocalOffer13-041205.jpg"
</script>
</head>
<img src=\"images/pentagg.jpg\" width=\"500\" height=\"300\" name=\"slide\" /></p>
<script type=\"text/javascript\">
var step=1;
function slideit()
{
document.images.slide.src = eval(\"image\"+step+\".src\");
if(step<4)
step++;
else
step=1;
setTimeout(\"slideit()\",2500);
}
slideit();
</script>
You call the function slideit() on page load, this is the reason that this work automaticly, do that, it's should work:
<button onclick="slideit()">Next image</button>
<script type=\"text/javascript\">
var step=1;
function slideit()
{
document.images.slide.src = eval(\"image\"+step+\".src\");
if(step<4)
step++;
else
step=1;
}
</script>
Related
Here is what I have as an image slider:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
<!-->
var image1 = new Image()
image1.src = "/image0.jpeg"
var image2 = new Image()
image2.src = "/image1.jpeg"
var image3 = new Image()
image3.src = "/image2.jpeg"
//-->
</script>
</head>
<body>
<img src="/research/logos/.jpeg" name="slide" width="400" height="400">
<script type="text/javascript">
<!--
var step = 1
function slideit() {
document.images.slide.src = eval("image" + step + ".src")
if (step < 3)
step++
else
step = 1
setTimeout("slideit()", 2500)
}
slideit()
//-->
</script>
</body>
</html>
I know how to put a form on top of an image from here:
https://www.w3schools.com/howto/howto_css_form_on_image.asp. A simple form where there is one button through which the viewer could send responses to would suffice.
Could anyone kindly shed light on how to combine the two? Thanks!
I intend to include a button in my traffic light code so that the user can click on it to activate the traffic light however, i am unsure of where to place it in my code.
This is my code:
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "traffic light_1.png"
var image2 = new Image()
image2.src = "traffic light_2.png"
var image3 = new Image()
image3.src = "traffic light_3.png"
var image4 = new Image()
image4.src = "traffic light_2.png"
</script>
</head>
<body>
<p><img src="traffic light_1.png" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<4)
step++;
else
step=1;
setTimeout("slideit()",3000);
}
slideit();
</script>
</body>
Place the button wherever you like inside the body tag.
<input type="button" name="start" value="Start/stop Traffic light" onclick="startStop()">
Remove the setTimeout and the slideit() initial call.
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<4)
step++;
else
step=1;
}
And add the startStop function below and the working variable declaration.
var working;
function startStop() {
if (typeof working != 'undefined') working = clearInterval(working);
else working=setInterval("slideit()", 3000);
}
javascript newbee here :|
I created a slidershow, but i need to add 4 more slidershows on my website, if i add more slidershows only the first slidershow works, the other stand still :/
can someone explain me, what i need to change, to get multiple slidershows on my website?
here's my java script:
<script type="text/javascript">
var image1=new Image()
image1.src="bilder/tfb_g/slide1.jpg"
var image2=new Image()
image2.src="bilder/tfb_g/slide2.jpg"
var image3=new Image()
image3.src="bilder/tfb_g/slide3.jpg"
</script>
<script type="text/javascript">
var step=1
function slideit (){
document.images.slide.src=eval('image'+step+'.src')
if(step<3)
step++
else
step=1
setTimeout('slideit ()',3000)
}
slideit()
</script>
and here is the picture in my body:
<img class="small" src="./bilder/tfb_g/slide.jpg" name="slide">
i'm a bit helpless xP
Try a class:
var image1 = new Image();
image1.src = "bilder/tfb_g/slide1.jpg";
var image2 = new Image();
image2.src = "bilder/tfb_g/slide2.jpg";
var image3 = new Image();
image3.src = "bilder/tfb_g/slide3.jpg";
SlideShow = function (ele) {
this.step = 1;
this.element = ele;
this.Move = function () {
this.element.src = eval('image' + this.step + '.src');
if (this.step < 3) this.step++;
else this.step = 1;
setTimeout(this.Move(), 3000);
};
};
and for the HTML
<img class="small" src="./bilder/tfb_g/slide.jpg" onload="slideshow1 = new SlideShow(this); slideshow1.Move();">
but make sure for each element, you rename the inline javascript variables.
EX:
slideshow2 = new SlideShow(this); slideshow2.Move();
slideshow3 = new SlideShow(this); slideshow3.Move();
slideshow65 = new SlideShow(this); slideshow65.Move();
http://jsfiddle.net/Lwxbrpgj/
I have made a slideshow and I would like to know how to add a third image. Here is my code: (by the way image 3 stated below is the image I would like to insert in too the slideshow.
<script type="text/javascript">
var image1 = new Image()
image1.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/9889814_orig.jpg"
var image2 = new Image()
image2.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/1421690233.png"
var image3 = new Image()
image3.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
</script>
</head>
<body>
<img src="" name="slide" id="slide"/>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
You need to add a new var and add a +1 to your counter
<script type="text/javascript">
var image1 = new Image()
image1.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/9889814_orig.jpg"
var image2 = new Image()
image2.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/1421690233.png"
var image3 = new Image()
image3.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
var image4 = new Image()
image4.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
</script>
</head>
<body>
<img src="" name="slide" id="slide"/>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<3)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
Also i do recommend using an array, will make your code much cleaner and understandable
To the script scope add this same all others:
var image4 = new Image()
image4.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
The code: document.images.slide.src = eval("image"+step+".src");
will take it automaticly, because it's taking all your Image() objects in this HTML
How can I add a link for an image created using the following Javascript code. I tried some changes, but nothing worked.
Please change the following code to the code with a link. I want to link all images at http://idealbodyweights.com/.
<script type="text/javascript">
var image1 = new Image()
image1.src =="http://idealbodyweights.com/wp-content/uploads/2013/05/1.png"
var image2 = new Image()
image2.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/2.png"
var image3 = new Image()
image3.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/3.png"
var image4 = new Image()
image4.src = "http://idealbodyweights.com/wp-content/uploads/2013/05/4.png"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="720" height="90" name="slide" /></p>
<script type="text/javascript">
var step=4;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<4)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
I rewrote a little of your code so it doesn't use eval and so the <img> is fetched using document.getElementById.
...
<script type="text/javascript">
var imgsrc = [
'http://idealbodyweights.com/wp-content/uploads/2013/05/1.png', // 0
'http://idealbodyweights.com/wp-content/uploads/2013/05/2.png', // 1
'http://idealbodyweights.com/wp-content/uploads/2013/05/3.png', // 2
'http://idealbodyweights.com/wp-content/uploads/2013/05/4.png' // 3
],
imgcache = [], i;
for (i = 0; i < imgsrc.length; ++i) { // cache images
imgcache[i] = new Image();
imgcache[i].src = imgsrc[i];
}
</script>
</head>
<body>
<p><img src="images/pentagg.jpg"
width="720" height="90"
name="slide" id="slide" /></p>
<script type="text/javascript">
var step = -1, // set so first will be 0
img = document.getElementById('slide'); // get the <img>
function slideit() {
step = (step + 1) % imgsrc.length; // loop over 0, 1, 2, 3 (or more)
img.src = imgsrc[step]; // set src by array index
setTimeout(slideit, 2500); // repeat in 2500 ms
}
slideit();// start
</script>
...
Is it what you want? :D
<p>
<a href="http://idealbodyweights.com/">
<img src="images/pentagg.jpg" width="720" height="90" name="slide" />
</a>
</p>