これでどうでしょう。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="utf-8">
5 <title>タイトル</title>
6 <style type="text/css">
7 * {
8 margin: 0;
9 padding: 0;
10 }
11 </style>
12</head>
13<body>
14<img src="img/0.jpg" name="gazou" id="gazou">
15<input type="button" value="戻る" id="back">
16<input type="button" value="停止" id="stop">
17<input type="button" value="次へ" id="next">
18<script>
19 let no = 10, i = 0, exp = ".jpg", tim;
20
21 document.addEventListener("DOMContentLoaded", function () {
22 tim = setInterval(function () {
23 i++;
24 i %= no;
25 document.getElementById("gazou").src = "img/" + i + exp;
26 }, 3000);
27 });
28
29 document.getElementById("gazou").addEventListener("click", function () {
30 clearInterval(tim);
31 i++;
32 i %= no;
33 document.getElementById("gazou").src = "img/" + i + exp;
34 });
35
36 document.getElementById("back").addEventListener("click", function () {
37 clearInterval(tim);
38 tim = setInterval(function () {
39 i += no - 1;
40 i %= no;
41 document.getElementById("gazou").src = "img/" + i + exp;
42 }, 3000);
43 });
44
45 document.getElementById("stop").addEventListener("click", function () {
46 clearInterval(tim);
47 });
48
49 document.getElementById("next").addEventListener("click", function () {
50 clearInterval(tim);
51 tim = setInterval(function () {
52 i++;
53 i %= no;
54 document.getElementById("gazou").src = "img/" + i + exp;
55 }, 3000);
56 });
57</script>
58</body>
59</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/25 13:54