Skip to content

Commit df6fb88

Browse files
stpaultimstpaultim
committed
Cleaning up the code a little
1 parent 30fdb35 commit df6fb88

File tree

3 files changed

+56
-26
lines changed

3 files changed

+56
-26
lines changed

‎java.html‎ renamed to ‎index.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<html>
2-
<head>
2+
<head>
33
<title>Javascript Slideshow</title>
4-
5-
<!-- Create a list of images to appear in slideshow -->
64
<link rel="stylesheet" type="text/css" href="java.css">
5+
6+
<!-- Create a list of images to appear in slideshow. Add as many images as you like. Simply add their file names to this list.
7+
* Each file should be placed in :"images/.."
8+
* Includ a comma after each image. -->
9+
710
<script type="text/javascript">
811
var slides = [
912
"one.jpg",
@@ -12,14 +15,15 @@
1215
"four.jpg",
1316
"five.jpg"
1417
]
15-
1618
</script>
1719

1820
</head>
1921
<body>
2022
<div class="wrapper">
2123
<button class="pointers back">Back</button>
2224
<div id="slideshow">
25+
26+
<!-- Using Javascript to insert 3 images at time into the FRAME. Only the middle one is visible, except during animations. -->
2327
<div id="frame">
2428

2529
</div>

‎java.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* Simple css for slideshow */
2+
13
html {
24
padding: 0px; margin: 0px;
35
}

‎java.js‎

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,49 @@
1-
function showSlides() {
2-
console.log("Show Slides");
3-
}
1+
/*
2+
My initial approach for this project is to totally
3+
manage the images in Javascript. User can enter image file
4+
names into opening script of HTML doc.
45
6+
At any given time, Javascript is passing along three images to the DOM.
7+
The "current", "previous," and "next" image. Each time the slider moves
8+
the array is updated as well as the images that are being
9+
passed along to the DOM.
10+
*/
511

6-
document.getElementById('frame').innerHTML =
7-
'<div><img src="images/' + slides[2] + '"></div><div><img src="images/' + slides[1] + '"></div><div><img src="images/' + slides[0] + '"></div>';
12+
updateSlides();
813
document.getElementById("frame").style.marginLeft = "-600px";
9-
console.log("Start " + slides[1]);
14+
//console.log("Start " + slides[1]);
1015

11-
var leftClick = document.querySelector('.back');
12-
var rightClick = document.querySelector('.forward');
16+
var clickBack = document.querySelector('.back');
17+
var clickForward = document.querySelector('.forward');
1318

14-
leftClick.addEventListener('click', moveBack);
15-
rightClick.addEventListener('click', moveForward);
19+
clickBack.addEventListener('click', moveBack);
20+
clickForward.addEventListener('click', moveForward);
1621

17-
function moveBack() {
22+
/* upDate slides is the function that updates the DOM with the three
23+
active images at any given time. */
24+
25+
function updateSlides() {
1826
document.getElementById('frame').innerHTML =
1927
'<div><img src="images/' + slides[2] + '"></div><div><img src="images/' + slides[1] + '"></div><div><img src="images/' + slides[0] + '"></div>';
28+
}
29+
30+
31+
/* Moves images in array backward One */
32+
function updateArrayBack() {
33+
var temp = slides.pop();
34+
slides.unshift(temp);
35+
}
36+
37+
/* Moves images in array forward One */
38+
function updateArrayForward () {
39+
var temp = slides.shift();
40+
slides.push(temp);
41+
}
2042

21-
console.log("Start Backwards " + slides[1]);
43+
/* Animates the slideshow backwards */
44+
function moveBack() {
45+
updateSlides();
46+
//console.log("Start Backwards " + slides[1]);
2247
var id = setInterval(frame, 1);
2348
var left = -600;
2449
function frame() {
@@ -29,13 +54,13 @@ function moveBack() {
2954
document.getElementById("frame").style.marginLeft = (left) + "px";
3055
}
3156
};
32-
var temp = slides.pop();
33-
slides.unshift(temp);
57+
updateArrayBack()
3458
document.getElementById("frame").style.marginLeft = "-600px";
35-
console.log("Finish Backwards" + slides[1]);
36-
console.log(slides);
59+
//console.log("Finish Backwards" + slides[1]);
60+
//console.log(slides);
3761
}
3862

63+
/* Animates the slideshow forwards */
3964
function moveForward () {
4065
console.log("Start Forward " + slides[1]);
4166
var id = setInterval(frame, 1);
@@ -48,12 +73,11 @@ function moveForward () {
4873
document.getElementById("frame").style.marginLeft = (right) + "px";
4974
}
5075
};
51-
var temp = slides.shift();
52-
slides.push(temp);
53-
document.getElementById('frame').innerHTML =
54-
'<div><img src="images/' + slides[2] + '"></div><div><img src="images/' + slides[1] + '"></div><div><img src="images/' + slides[0] + '"></div>';
55-
console.log("Finish Forward " + slides[1]);
56-
console.log(slides);
76+
updateArrayForward ();
77+
updateSlides();
78+
79+
//console.log("Finish Forward " + slides[1]);
80+
//console.log(slides);
5781
};
5882

5983

0 commit comments

Comments
 (0)