How to add another image to my slideshow - javascript

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

Related

JavaScript: form on every image in an image slider?

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!

How to create button for traffic light code in javascript?

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);
}

multiple slidershows on one site?

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/

How to make this Slideshow not automatic but click to change image

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>

How to add link for the image using Javascript

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>

Categories