Add a change speed button next to the pause button that changes the speed of the slideshow.
Add a change speed button next to the pause button that changes the speed of the slideshow.
Existing code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Titan Sports Store</title>
<link rel="stylesheet" href="./css/style.css" />
<script type="text/javascript" src="./js/library_event.js"></script>
<script type="text/javascript" src="./js/library_slide_show.js"></script>
<script type="text/javascript" src="./js/slide_show.js"></script>
</head>
<body>
<main>
<h1 id="title">Fishing Slide Show</h1>
<p><input type="button" id="play_pause" value="Pause" /></p>
<p><img src="img/clorox.jpg" id="image" alt=" " /></p>
<p><span id="caption">Products</span></p>
</main>
</body>
</html>
style.css
* {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#title {
margin-bottom: 10px;
color: #3f51b5;
}
#play_pause {
margin-bottom: 10px;
padding: 2px;
border: 0;
background: transparent;
font-size: 1em;
color: #3f51b5;
outline: none;
cursor: pointer;
text-decoration: underline;
text-decoration-color: #3f51b5;
}
#image {
margin-bottom: 10px;
width: 100%;
width: 800px;
height: 400px;
border-radius: 5px;
}
#caption {
font-weight: 500;
font-size: 1.1em;
color: #3f51b5;
}
library_event.js
var evt = {
attach: function(node, eventName, func) {
if (node.addEventListener) {
node.addEventListener(eventName, func);
} else if (node.attachEvent) {
node.attachEvent("on" + eventName, func);
}
},
detach: function(node, eventName, func) {
if (node.removeEventListener) {
node.removeEventListener(eventName, func);
} else if (node.detachEvent) {
node.detachEvent("on" + eventName, func);
}
},
preventDefault: function(e) {
e = e || window.event;
if ( e.preventDefault ) { e.preventDefault(); }
else { e.returnValue = false; }
}
};
library_slide_show.js
var slideshow = {
timer: null,
nodes: { image: null, caption: null },
img: { cache: [], counter: 0 },
play: true,
speed: 2000,
loadImages: function(slides) {
var image;
for ( var i in slides ) {
image = new Image();
image.src = slides[i].href;
image.title = slides[i].title;
this.img.cache.push( image );
}
return this;
},
startSlideShow: function() {
if (arguments.length === 2) {
this.nodes.image = arguments[0];
this.nodes.caption = arguments[1];
}
this.timer = setInterval(this.displayNextImage.bind(this),
this.speed);
return this;
},
stopSlideShow: function() {
clearInterval( this.timer );
return this;
},
displayNextImage: function() {
this.img.counter = ++this.img.counter % this.img.cache.length;
var image = this.img.cache[this.img.counter];
this.nodes.image.src = image.src;
this.nodes.caption.firstChild.nodeValue = image.title;
},
setPlayText: function(a) {
a.value = (this.play)? "Resume" : "Pause";
return this;
},
togglePlay: function(e) {
if ( slideshow.play ) {
slideshow.stopSlideShow().setPlayText(this);
} else {
slideshow.startSlideShow().setPlayText(this);
}
slideshow.play = ! slideshow.play;
evt.preventDefault(e);
}
};
slide_show.js
var $ = function(id) { return document.getElementById(id); };
window.onload = function() {
//var slideshow = createSlideShow();
var slides = [
{href:"img/clorox.jpg", title:"Household Cleaner 1"},
{href:"img/mrclean.jpg", title:"Household Cleaner 2"},
{href:"img/oxiclean.jpg", title:"Household Cleaner 3"},
{href:"img/pinesol.jpg", title:"Household Cleaner 4"},
{href:"img/windex.jpg", title:"Household Cleaner 5"}
];
slideshow.loadImages(slides).startSlideShow($("image"), $("caption"));
evt.attach($("play_pause"), "click", slideshow.togglePlay);
};
Step by step
Solved in 2 steps
