スライドショーで、「戻る」を色々試みるのですが出来ません。動いてくれません。すみませんが、教えて頂けませんでしょうか、よろしくお願いいたします。

申し訳ございません。
スライドショーで、「停止」や「次へ」は動くのですが、「戻る」を色々試みるのですが出来ません。動いてくれません。すみませんが、教えて頂けませんでしょうか、よろしくお願いいたします。


<body onLoad="no=10;i=0;exp='.jpg';tim=setInterval('i++;i%=no;gazou.src=i+exp;',3000);"> 

<img src="aru/0.jpg" name="gazou" onClick="clearInterval(tim);i++;i%=no;gazou.src=i+exp;"> 

<input type="button" value="戻る" onClick="clearInterval(bak);bak=setInterval('i--;i%=0;gazou.src=i+exp;',3000);"> 
 <input type="button" value="停止"  onClick="clearInterval(tim);"> 
 <input type="button" value="次へ" onClick="clearInterval(tim);tim=setInterval('i++;i%=no;gazou.src=i+exp;',3000);">

行動規範の内容に同意します

回答1件

ベストアンサー

これでどうでしょう。

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>