Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Can someone suggest good javascript code to implement slideshow such that all the elements of slideshow are declared in or an array.I want it using purely javascript without using jQuery
This may be useful to you. Copy and replace images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image slide show</title>
<style type="text/css">
body {
background:#FFC;
}
input[type="button"] {
background:#939907;
color:#fff;
border:1px solid #434603;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-ms-border-radius:5px;
font-weight:bold;
cursor:pointer;
height:25px;
}
img {
width:525px;
height:200px;
border:2px solid #CF3;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-ms-border-radius:15px;
}
</style>
<script type="text/javascript">
var images=new Array();
var i=0, t, f=false;
images[0] ="images/heli1.jpg";
images[1] ="images/heli2.JPG";
images[2] ="images/heli3.JPG";
images[3] ="images/heli4.JPG";
images[4] ="images/heli5.JPG";
images[5] ="images/heli6.JPG";
images[6] ="images/heli7.JPG";
images[7] ="images/heli2.JPG";
images[8] ="images/heli9.JPG";
images[9] ="images/heli1.jpg";
images[10] ="images/heli2.JPG";
images[11] ="images/heli3.JPG";
images[12] ="images/heli4.JPG";
images[13] ="images/heli5.JPG";
images[14] ="images/heli6.JPG";
function start(){
if(i>=images.length){
i=0;
document.getElementById('img').src=images[i];
i++;
}
else{
document.getElementById('img').src=images[i];
i++;
}
t=setTimeout("start()", 1000);
}
function play(){
if(f==false){
f=true;
start();
}
}
function Stop(){
clearTimeout(t);
f=false;
}
function next(){
if(i>=images.length){
i=0;
document.getElementById('img').src=images[i];
i++;
}
else{
document.getElementById('img').src=images[i];
i++;
}
}
function previous(){
if(i>=images.lenght){
i=images.length;
document.getElementById('img').src=images[i];
i--;
}
else if(i<=0){
i=images.length;
document.getElementById('img').src=images[i-1];
i--;
}
else if(i>images.length){
document.getElementById('img').src=images[images.length-i];
}
else if(i<=images.length || i>0){
document.getElementById('img').src=images[i-1];
i--;
}
}
</script>
</head>
<body>
<table width="50%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><input type="button" value="Previous" onclick="previous()" /></td>
<td align="center"><img src="images/heli6.JPG" alt="" id="img" /></td>
<td><input type="button" value="Next" onclick="next()" /></td>
</tr>
<tr>
<td colspan="3" align="center" height="50"><input type="button" value="Play" onclick="play()" />
<input type="button" value="Stop" onclick="Stop()" /></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script language="javascript">
loaded_img = 0;
no_of_img = 12;
img_name = new Array();
img_name.length = no_of_img - 1;
for ( var count = 0; count < no_of_img; count++)
{
var file_num = count + 1;
var filename = ("img" + file_num + ".jpg");
img_name[count] = filename;
}
var whichlink=0
function slideit(){
if (!document.images)
return
document.images.myimage.src=img_name[loaded_img].src
whichlink=loaded_img
if (loaded_img<img_name.length-1)
loaded_img++
else
loaded_img=0
setTimeout("slideit()",1000)
}
slideit()
function changeImage(direction)
{
loaded_img=loaded_img+direction;
if (loaded_img < 0)
loaded_img = no_of_img - 1;
if (loaded_img == no_of_img)
loaded_img = 0;
document.myimage.src = img_name[loaded_img];
}
</script>
<script language="javascript">
//slideshowimages()=new Array()
//slideshowimages("img1.jpg")
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.myimage.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",1000)
}
slideit()
</script>
<form>
<img src="left-disabled.gif" width="27" height="22" border="0">
<img src="img1.jpg" name="myimage">
<img src="right-enabled.gif" width="27" height="22" border="0">
</form>
</body>
</html>
This question is old, but here is a more comprehensive example with pure JavaScript. It assumes that index.html and slideshow.js are on the same level. It begins with an automatically playing slideshow (that can be paused and resumed), and it also has previous and next buttons. If you only want one of those sets of functionality, it should be fairly straightforward to remove the other.
The HTML is very barebones and can be altered as desired for the most part as long as you mind the ids. I haven't provided any styling, so that's all you.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slideshow</title>
</head>
<body>
<section>
<div>
<img id="image">
</div>
<div>
<button type="button" id="playBtn">Play</button>
<button type="button" id="pauseBtn">Pause</button>
</div>
<div>
<button type="button" id="prevBtn">Prev</button>
<button type="button" id="nextBtn">Next</button>
</div>
</section>
<script src="slideshow.js"></script>
</body>
</html>
If you want to support IE8 and/or below, you'll need to ditch the DOMContentLoaded listener. Essentially, you could just extract the IIFE and then replace its final line return beginSlideshow with beginSlideshow(). I hope that makes sense, and I hope you find this helpful. Good luck.
// slideshow.js
document.addEventListener(
// IE 9 and up. See http://caniuse.com/#feat=domcontentloaded
'DOMContentLoaded'
, (function STRICT() {
'use strict';
// Avoid 'new' and stick to array literals where possible.
var images =
[ 'img/30.gif'
, 'img/31.gif'
, 'img/32.gif'
, 'img/33.gif'
, 'img/34.gif'
]
, img = document.getElementById('image')
, playBtn = document.getElementById('playBtn')
, pauseBtn = document.getElementById('pauseBtn')
, prevBtn = document.getElementById('prevBtn')
, nextBtn = document.getElementById('nextBtn')
, index = 0
, indexOfLastImage = images.length - 1
, play
, playInterval
, pause
, goToPrevious
, goToNext
, beginSlideShow
play = function() {
playInterval = setInterval(
function() {
if (index === indexOfLastImage) { index = 0 }
img.src = images[++index]
}
, 3000
)
}
pause = function() {
clearInterval(playInterval)
playInterval = null
}
goToPrevious = function() {
// if the slideshow was running
if (playInterval) { pause() }
// if we're at the beginning of the array
if (index === 0) {
index = indexOfLastImage + 1
}
img.src = images[--index]
}
goToNext = function() {
// if the slideshow was running
if (playInterval) { pause() }
// if we're at the beginning of the array
if (index === indexOfLastImage) {
index = -1
}
img.src = images[++index]
}
beginSlideShow = function() {
// add listeners
playBtn.addEventListener('click', play)
pauseBtn.addEventListener('click', pause)
prevBtn.addEventListener('click', goToPrevious)
nextBtn.addEventListener('click', goToNext)
// set initial image for display prior to first interval
img.src = images[index]
// kick off auto play
play()
}
// This is what's attached to and will fire on the DOMContentLoaded event
return beginSlideShow
}())
)
Related
I'm trying to implement a timer that will swap the larger image with the next image in line, I feel like I'm on the right track, but I'm not getting there. I can't use Jquery or (event.target), (event.srcElement) or appendChild. Any ideas? I don't think my function is doing anything right now. Current code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<script>
var aryImages[] = {"1.jpg", "2.jpg", "3.jpg"}
function changeImage(varImage) {
document.getElementById('bigImage').src='images/1.jpg';
for (var i = 1; i < 4; i ++)
index.html = "images/1.jpg" + photoOrder[i] +"sm.jpg";
}
</script>
/* styling elements */
<style>
img
{
width: 300px;
height: 290px;
padding: 2px;
}
body
{
text-align: center;
background-color: black;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" id="bigImage" />
</div>
<img src='images/1.jpg' id='image1' onclick="changeImage(image1)" />
<img src='images/2.jpg' id='image2' onclick="changeImage(image2)"/>
<img src='images/3.jpg' id='image3' onclick="changeImage(image3)"/>
</body>
</html>
This should be what you're looking for. I set an interval that will rotate through your images. If the user clicks an image, that will change the image and reset the interval.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<script>
var i = 1;
function changeImage(event, varImage) {
document.getElementById('bigImage').src='images/' + varImage + '.jpg';
// use this so the image interval doesnt
// interfere with user's click
if (event !== null) {
clearInterval(newInt);
newInt = setInterval(() => {
changeImage(null, i++);
if (i === 4) i = 1;
}, 500);
}
}
var newInt = setInterval(() => {
changeImage(null, i++);
if (i === 4) i = 1;
}, 500)
</script>
/* styling elements */
<style>
img
{
width: 300px;
height: 290px;
padding: 2px;
}
body
{
text-align: center;
background-color: black;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" id="bigImage" />
</div>
<img src='images/1.jpg' id='1' onclick="changeImage(event, 1)" />
<img src='images/2.jpg' id='2' onclick="changeImage(event, 2)"/>
<img src='images/3.jpg' id='3' onclick="changeImage(event, 3)"/>
</body>
</html>
first of all you are not changing anything
you dont have a timer at all :)
here how to implement one:
setInterval(function(){
// do something;
}, 3000);
now inside the timer you should change images
for example
you should run inspect element on image to see changes because there is no images at these sources
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var currentImage = 0;
// assuming that image is the image index in the array.
var changeImage = function (image) {
document.getElementById('bigImage').src = 'images/' + images[image];
};
// now we can use setInterval function
setInterval(function(){
// check if we reached the last image
if(currentImage >= images.length -1) {
// if last image go back to first one
currentImage = 0;
} else {
// if not last image so give me the next
currentImage ++;
}
// do the image change
changeImage(currentImage);
}, 3000);
<img src="images/image1.jpg" id="bigImage" />
<button onclick="changeImage(0)" > image1 </button>
<button onclick="changeImage(1)" > image2 </button>
<button onclick="changeImage(2)" > image3 </button>
I'm making a slideshow in Javascript with a play/pause button. When I press one time on the button, the slideshow starts to play. When I press a second time, the slideshow has to stop. I only have no idea how to put this function in one button.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Oefening 19.7</title>
<link href="stijl_Oefening19_6.css" rel="stylesheet" />
<script>
var i = 0;
var foto = new Array(3);
var timer;
foto[0] = "images/slideshow/slideshow1.png";
foto[1] = "images/slideshow/slideshow2.png";
foto[2] = "images/slideshow/slideshow3.png";
foto[3] = "images/slideshow/slideshow4.png";
function slide() {
document.getElementById("slideshow").src = foto[i];
if (i < foto.length - 1) i++;
else i = 0;
timer = setTimeout("slide()", 3000);
}
</script>
</head>
<body>
<div id="portfolio">
<img src="images/slideshow/slideshow1.png" id="slideshow" alt="slideshow" />
</div>
<div id="button">
<a href="#" id="startcycle" onclick="slide()">
<img id="btnCycle" src="images/slideshow/cyclebutton.png" />
</a>
</div>
</body>
</html>
Use setInterval() instead. And separate the switch function and the slide function.
function slide() {
document.getElementById("slideshow").src = foto[i];
i = (i + 1)%foto.length;
}
function setTimer(){
if (timer) {
// stop
clearInterval( timer );
timer=null;
}
else {
timer = setInterval("slide()",1000);
}
}
Let the button call setTimer().
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<img name="img" src="http://4.bp.blogspot.com/-Jdj5JKTA1xQ/T-BzvrQDZhI/AAAAAAAABhs/bX0TUEFb3Ck/s1600/windows-help1.png" width="90%" height="100%">
<script>
setInterval(function () {
var images = document.getElementsByTagName('img'); // get all img DOM objects
for (var i = 0; i < images.length; i++) {
images[i].src = images[i].src.replace(/\btime=[^&]*/, 'time=' + new Date().getTime());
}
}, 1000);
</script>
</body>
</html>
In Chrome I can see my picture refresh every second, but in IE version 9 it does not work. It does not refresh after displaying one time. How can I solve this problem, or is there any other way to do it?
The code, as is, should work. Also in IE 9.
Try something like this to verify that the scr attribute actually get changed:
Sample fiddle
JSFiddle does not work well in IE 8 – which I tested on, but this should give you a viewable sample for IE:
Sample fiddle
HTML:
<img src="http://jsfiddle.net/img/initializing.png?time=123" />
<img src="http://jsfiddle.net/img/initializing.png?time=123" />
<br/>
Img0.src: <input type="text" /><br/>
Img1.src: <input type="text" /><br />
Counter : <input type="text" />
CSS:
input {
width : 500px;
}
Javascript:
var img = document.getElementsByTagName('img');
var inp = document.getElementsByTagName('input');
var cnt = 0;
setInterval(function () {
inp[2].value = ++cnt;
for (var i = 0; i < img.length; i++) {
img[i].src = img[i].src
.replace(/\btime=[^&]*/, 'time=' + new Date().getTime());
inp[i].value = img[i].src;
}
}, 1000);
I am stuck on my homework project. I am supposed to create a JavaScript program that shows an animated puppy running. I must use caching to start the animation as soon as the images finish loading and 1 of the following: getElementsByName(), getElementById(), or getElementsByTagName(). Here's what I have so far but when I run it in Firefox all I see is a flashing box that says "image of a puppy"
<!DOCTYPE HTML>
<html>
<head>
<title>Running Puppy</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<script type="text/javascript">
/* <![CDATA[ */
var puppy = new Array(6);
var curPuppy = 0
for (var imagesLoaded=0; imagesLoaded < 6;
++imagesLoaded) {
puppy[imagesLoaded] = new Image();
puppy[imagesLoaded].src
= "images/puppy" + imagesLoaded + ".gif";
}
function run(){
if (curPuppy == 5)
curPuppy = 0;
else
++curPuppy;
document.getElementById("puppyImage").src = puppy[curPuppy].src;
}
/*]]> */
</script>
</head>
<body onload="setInterval('run()', 150)">
<img src="images/puppy0.gif" id="puppyImage" width="263" height="175" alt="Image of a puppy." />
<script type="text/javascript">
/* <![CDATA[ */
document.write("<h1 id='mainHeading'></h1>");
document.getElementById("mainHeading").innerHTML = document.getElementsByTagName("title")[0].innerHTML;
/*]]> */
</script>
</body>
</html>
So I am doing something very basic that can be done with CSS but I want to do it with jQuery to get familiar with the library.
I am trying to create a rollover image gallery. Where when you put the mouse over the image it will be swapped with a slightly edited version of it.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery</title>
<script src="jquery-1.9.1.js"></script>
<style>
</style>
</head>
<body>
<div id="gallery">
<img src="images/one_s.jpg" />
<img src="images/two_s.jpg" />
<img src="images/three_s.jpg" />
<img src="images/four_s.jpg" />
<img src="images/five_s.jpg" />
<img src="images/six_s.jpg" />
</div>
<script>
$(document).ready(function(){
var alternate = ['images/one_s_edited.jpg',
'images/two_s_edited.jpg',
'images/three_s_edited.jpg',
'images/four_s_edited.jpg',
'images/five_s_edited.jpg',
'images/six_s_edited.jpg'];
var $selection = $("#gallery img");
for(var i = 0; i < alternate.length; i++)
{
var imgObject = new Image();
var downloadedImg = imgObject.src = alternate[i];
console.log(downloadedImg);
var originalSrc = $selection.eq(i).attr("src");
console.log(originalSrc + "\n");
$selection.eq(i).hover(
function(){
$(this).attr("src", downloadedImg);
},
function(){
$(this).attr("src", originalSrc);
}
);//End hover
}//End loop
});//End ready
</script>
</body>
</html>
Here is a link to the final result: link
As you can see it rolls over but not as planned. It ends up with the last rollover-image and doesn't change back to the original nor does it show the appropriate rollover image that corresponds with it.
Any simple suggestions without using regular expressions?
The problem is the wrong usage of a closure variable in a loop.
But the solution can be simplified to
$(document).ready(function () {
var $selection = $("#gallery img");
$selection.hover(function () {
this.src = this.src.replace('.jpg', '_edited.jpg')
}, function () {
this.src = this.src.replace('_edited.jpg', '.jpg')
})
}); //End ready