Homework Sourse1 Review the code in the JavaScript file to see that it incl
1. Review the code in the JavaScript file to see that it includes a function for running the slide show and a statement that starts the slide shown by running this function.
2. Add an event handler that stops the slide show on even clicks of the middle button and starts the slide show on odd clicks. When the slide show is stopped, the value of the middle button should be “Play”. When the slide show is running, the value of this button should be “Pause”. Also, the other buttons should be enabled when the slide show is stopped and disabled when the slide show is running.
3. Add an event handler that displays the next slide when the Next button is clicked. Within this event handler, disable the Next button if the last slide is displayed. Also, enable the Previous button if that button is disabled.
4. Add a similar event handler that displays the previous slide when the Previous button is clicked.
the html:
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Slide Show</title>
<link rel=\"stylesheet\" href=\"main.css\">
<script src=\"http://html5shiv.googlecode.com/svn/trunk/html5.js\"></script>
<script src=\"http://code.jquery.com/jquery-latest.min.js\"></script>
<script src=\"slide_show.js\"></script>
</head>
<body>
<section>
<h1>Fishing Slide Show</h1>
<h2 id=\"caption\">Casting on the Upper Kings</h2>
<img id=\"slide\" src=\"images/casting1.jpg\" alt=\"\">
<div id=\"slides\">
<img src=\"images/casting1.jpg\" alt=\"Casting on the Upper Kings\">
<img src=\"images/casting2.jpg\" alt=\"Casting on the Lower Kings\">
<img src=\"images/catchrelease.jpg\" alt=\"Catch and Release on the Big Horn\">
<img src=\"images/fish.jpg\" alt=\"Catching on the South Fork\">
<img src=\"images/lures.jpg\" alt=\"The Lures for Catching\">
</div>
<div id=\"buttons\">
<input type=\"button\" id=\"prev\" value=\"Previous\" disabled>
<input type=\"button\" id=\"play\" value=\"Pause\">
<input type=\"button\" id=\"next\" value=\"Next\" disabled>
</div>
</section>
</body>
</html>
the css:
body {
font-family: Arial, Helvetica, sans-serif;
width: 380px;
height: 350px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
}
h1, h2, ul, p {
margin: 0;
padding: 0;
}
h1 {
padding-bottom: .25em;
color: blue;
}
h2 {
font-size: 120%;
padding: .5em 0;
}
img {
height: 250px;
}
#slides img {
display: none;
}
#buttons {
margin-top: .5em;
text-align: center;
}
the javascript:
$(document).ready(function() {
var nextSlide = $(\"#slides img:first-child\");
var nextCaption;
var nextSlideSource;
// the function for running the slide show
var runSlideShow = function() {
$(\"#caption\").fadeOut(1000);
$(\"#slide\").fadeOut(1000,
function () {
if (nextSlide.next().length == 0) {
nextSlide = $(\"#slides img:first-child\");
}
else {
nextSlide = nextSlide.next();
}
nextSlideSource = nextSlide.attr(\"src\");
nextCaption = nextSlide.attr(\"alt\");
$(\"#slide\").attr(\"src\", nextSlideSource).fadeIn(1000);
$(\"#caption\").text(nextCaption).fadeIn(1000);
}
)
}
// start the slide show
var timer = setInterval(runSlideShow, 3000);
}
need editied code with solution please
Solution
I think you need one function which will change enable/disable status of button and text on button. Use following function and add it to your play button like onclick=\"play()\" in it.
function play()
{
document.getElementById(\"prev\").disabled = false;
document.getElementById(\"next\").disabled = false;
if(document.getElementById(\"play\").value==\"play\")
{
document.getElementById(\"play\").value=\"pause\";
}
if(document.getElementById(\"play\").value==\"pause\")
{
document.getElementById(\"play\").value=\"play\";
}
}
