0
私はこのコードで助けが必要です。以前のイベントのクリックボタンを作成したいと思います。ちょっとしたコードを使ってこれをどうすればいいですか？次のボタンのクリックイベントと同様のものです。Javascript、JQuery前のボタン
ここに私のフルコードです。
$(document).ready(function() {
\t var nextSlide = $("#slides img:first-child");
\t var nextCaption;
\t var nextSlideSource;
var counter = 0;
\t \t
\t // the function for running the slide show
var runSlideShow = function() {
\t $("#caption").fadeOut(1000);
\t $("#slide").fadeOut(1000,
\t \t function() {
\t \t if (nextSlide.next().length === 0) {
\t \t \t \t \t nextSlide = $("#slides img:first-child");
\t \t \t \t }
\t \t \t \t else {
\t \t \t \t \t nextSlide = nextSlide.next();
\t \t \t \t }
\t \t \t \t nextSlideSource = nextSlide.attr("src");
\t \t \t \t nextCaption = nextSlide.attr("alt");
\t \t \t \t $("#slide").attr("src", nextSlideSource).fadeIn(1000); \t \t \t \t \t
\t \t \t \t $("#caption").text(nextCaption).fadeIn(1000);
\t \t \t }
\t \t);
\t };
\t // start the slide show
\t var timer = setInterval(runSlideShow, 3000);
$("#play").on("click", function() {
if($(this).val() === "Pause") {
clearInterval(timer);
$(this).val("Play");
$("#prev").prop("disabled", false);
$("#next").prop("disabled", false);
}
else if ($(this).val() === "Play") {
timer = setInterval(runSlideShow, 3000);
$(this).val("Pause");
$("#prev").prop("disabled", true);
$("#next").prop("disabled", true);
}
});
var imag = $("#slides img").index();
var imageSize = $("#slides img").length - 1;
$("#next").on("click", function (e) {
e.preventDefault();
if (imag === imageSize) {
$("#next").prop("disabled", true);
}
else {
++imag;
runSlideShow(1);
}
});
});body {
font-family: Arial, Helvetica, sans-serif;
width: 380px;
height: 350px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
}
h1, h2, ul, p {
\t margin: 0;
\t padding: 0;
}
h1 {
\t padding-bottom: .25em;
\t color: blue;
}
h2 {
\t font-size: 120%;
\t padding: .5em 0;
}
img {
\t height: 250px;
}
#slides img {
\t display: none;
}
#buttons {
\t margin-top: .5em;
\t text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
\t <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>
\t <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">
\t <input type="button" id="prev" value="Previous" disabled>
\t <input type="button" id="play" value="Pause">
\t <input type="button" id="next" value="Next" disabled> \t
</div>
</section>
</body>
</html>私はそれの間でこのように思ったが、それは動作しません。
$("#prev").on("click", function() { if (imag === imageSize) { $("#prev").prop("disabled", true); } else { ++imag; runSlideShow(-1); } });次のボタンのクリックイベントと同様です。
$("#next").on("click", function (e) { e.preventDefault(); if (imag === imageSize) { $("#next").prop("disabled", true); } else { ++imag; runSlideShow(1); } });
すべてのヘルプしてください。