jqueryのスライドショーがどんどん早くなります

前提・実現したいこと

課題で、jqueryを使ってスライドショーを作っています。
スライドショーは完成したのですが、スライドの間隔がどんどん早くなります。
更新すると元のペースに戻るのですが、開いたまま放置しているとペースが短くなっていくのです。
3秒ごとに切り替わるようにしたいのですが……
「jquery スライドショー　早くなる」「jquery　スライドショー　自作」などのキーワードで検索してみたのですが、プラグインの説明のページがヒットしてしまいます。
どこか文法がおかしいのかと思い確認してみたのですが、どうにも解決しません。
ご教示お願い致します。

該当のソースコード

html
1<div class="news">
2    <img src="images/page1_03.gif" alt="" class="page1">
3    <ul>
4        <li class="newspage">
5            <div class="page cf">
6                <img src="images/menu2img1_08.gif" alt="" class="newsimg">
7                <div class="news-right">
8                    <img src="images/news_08.gif" alt="">
9                    <h2>お知らせタイトルお知らせタイトル</h2>
10                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
11                </div><!--news-right-->
12                <div class="indexmark">
13                    <img src="images/menu2index_13.gif" alt="">
14                </div>
15            </div>
16            <div class="page cf page-2">
17                <img src="images/menu2img2_14.gif" alt="" class="newsimg">
18                <div class="news-right">
19                    <img src="images/news_08.gif" alt="">
20                    <h2>お知らせタイトルお知らせタイトル</h2>
21                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
22                </div><!--news-right-->
23                <div class="indexmark">
24                    <img src="images/menu2index_13.gif" alt="">
25                </div>
26            </div>
27            <div class="cf page-3">
28                <img src="images/menu2img3_16.gif" alt="" class="newsimg">
29                <div class="news-right">
30                    <img src="images/news_08.gif" alt="">
31                    <h2>お知らせタイトルお知らせタイトル</h2>
32                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
33                </div><!--news-right-->
34                <div class="indexmark">
35                    <img src="images/menu2index_13.gif" alt="">
36                </div>
37            </div>
38        </li>
39        <li class="newspage">
40            <div class="page cf">
41                <img src="images/menu2img1_08.gif" alt="" class="newsimg">
42                <div class="news-right">
43                    <img src="images/news_08.gif" alt="">
44                    <h2>お知らせタイトルお知らせタイトル</h2>
45                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
46                </div><!--news-right-->
47                <div class="indexmark">
48                    <img src="images/menu2index_13.gif" alt="">
49                </div>
50            </div>
51            <div class="page cf page-2">
52                <img src="images/menu2img2_14.gif" alt="" class="newsimg">
53                <div class="news-right news-right2">
54                    <img src="images/news_08.gif" alt="">
55                    <h2>お知らせタイトルお知らせタイトル</h2>
56                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
57                </div><!--news-right-->
58                <div class="indexmark">
59                    <img src="images/menu2index_13.gif" alt="">
60                </div>
61            </div>
62            <div class="cf page-3">
63                <img src="images/menu2img3_16.gif" alt="" class="newsimg">
64                <div class="news-right news-right3">
65                    <img src="images/news_08.gif" alt="">
66                    <h2>お知らせタイトルお知らせタイトル</h2>
67                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
68                </div><!--news-right-->
69                <div class="indexmark">
70                    <img src="images/menu2index_13.gif" alt="">
71                </div>
72            </div>
73        </li>
74        <li class="newspage">
75            <div class="page cf">
76                <img src="images/menu2img1_08.gif" alt="" class="newsimg">
77                <div class="news-right">
78                    <img src="images/news_08.gif" alt="">
79                    <h2>お知らせタイトルお知らせタイトル</h2>
80                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
81                </div><!--news-right-->
82                <div class="indexmark">
83                    <img src="images/menu2index_13.gif" alt="">
84                </div>
85            </div>
86            <div class="page cf page-2">
87                <img src="images/menu2img2_14.gif" alt="" class="newsimg">
88                <div class="news-right news-right2">
89                    <img src="images/news_08.gif" alt="">
90                    <h2>お知らせタイトルお知らせタイトル</h2>
91                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
92                </div><!--news-right-->
93                <div class="indexmark">
94                    <img src="images/menu2index_13.gif" alt="">
95                </div>
96            </div>
97            <div class="cf page-3">
98                <img src="images/menu2img3_16.gif" alt="" class="newsimg">
99                <div class="news-right news-right3">
100                    <img src="images/news_08.gif" alt="">
101                    <h2>お知らせタイトルお知らせタイトル</h2>
102                    <p>お知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせお知らせ</p>
103                </div><!--news-right-->
104                <div class="indexmark">
105                    <img src="images/menu2index_13.gif" alt="">
106                </div>
107            </div>
108        </li>
109    </ul>
110    <img src="images/page2_05.gif" alt="" class="page2">
111</div><!--news-->

css
1/* ページ全体 */
2.cf:after{
3    content: "";
4    display: block;
5    clear: both;
6}
7
8/* news */
9.news{
10    width: 960px;
11    height: 340px;
12    margin: 20px auto;
13    border-radius:10px;
14    border: 2px solid orange;
15    position: relative;
16}
17
18/* ボタンになるオレンジ矢印 */
19.page1{
20    position: absolute;
21    top: 20px;
22    z-index: 2;
23}
24
25.page2{
26    position: absolute;
27    left: 931px;
28    top: 20px;
29}
30
31/* newsの中身、動く部分 */
32.news ul{
33    margin: 20px 48px;
34}
35
36/* 動く部分の内訳 */
37.newspage{
38    height: 300px;
39    margin-top: 12px;
40    padding-right: 20px;
41    padding-left: 20px;
42    /* background-color: pink; */
43}
44
45/* 上部 */
46.page{
47    border-bottom: 1px solid orange;
48    padding-bottom: 10px;
49    display: flex;
50}
51
52.newsimg{
53    float: left;
54}
55
56/* 上部の文章コンテンツ部分 */
57.news-right{
58    padding-left: 23px;
59    padding-right: 65px;
60    width: 525px;
61}
62
63.news-right img{
64    float: left;
65}
66
67.news-right h2{
68    line-height: 40px;
69    padding-left: 125px;
70    font-size: 15px;
71}
72
73.news-right p{
74    font-size: 13px;
75    padding-top: 18px;
76}
77
78/* 上部のインデックスマーク */
79
80
81/* 動く部分　真ん中 */
82.page-2{
83    padding-top: 8px;
84    display: flex;
85}
86
87/* 真ん中のインデックスマーク */
88.indexmark{
89    width: 30px;
90    height: 30px;
91    padding-top: 35px;
92    padding-right: 44px;
93}
94
95/* 動く部分　下 */
96.page-3{
97    padding-top: 8px;
98    display: flex;
99}
100
101/* 下 のインデックスマーク */
102.indexmark3{
103    position: absolute;
104    top:260px;
105    right: 90px;
106}
107
108
109/* js用css */
110.news{
111    position: relative;
112    overflow: hidden;
113}
114
115.news ul{
116    position: absolute;
117    width: 3000px;
118}
119
120.news li{
121    float: left;
122    width: 870px;
123    /* border:1px solid blue; */
124}

jquery
1$(function(){
2    // スライドショー(自動)
3    // 定義
4        // スクロール方向
5        var dir = -1;
6
7        // スクロールのインターバル
8        var interval = 3000;
9
10        // スクロールのスピード
11        var duration = 1500;
12
13        // タイマー用の変数
14        var timer;
15
16    // リストの順番を変更
17    $(".news ul").prepend($(".news li:last-child"));
18
19    // リストの配置を変更
20    $(".news ul").css("left", -930);
21
22    // 3000ミリ秒ごと(変数interval)にslideTimer関数を実行
23    timer = setInterval(slideTimer,interval);
24
25    // slideTimer関数を指定
26    function slideTimer(){
27        // スクロール方向の判断
28        if (dir==-1){
29            // 画像一枚ぶん左へスクロール
30            $(".news ul").animate({"left":"-=910px"}, duration,
31            function(){
32                // スクロールしたらリストの順番を変更(ループで)
33                $(this).append($(".news li:first-child"));
34    
35                // スクロールしたらリストの配置を変更
36                $(this).css("left", -930);
37            });
38
39        }else{
40           // 画像一枚ぶん右へスクロール
41           $(".news ul").animate({"left":"+=910px"}, duration,
42           function(){
43               // スクロールしたらリストの順番を変更(ループで)
44               $(this).append($(".news li:last-child"));
45   
46               // スクロールしたらリストの配置を変更
47               $(this).css("left", -930);
48
49               dir =-1;
50           }); 
51        }
52
53    }
54    // ここまでスライドショー(自動)
55
56    // スライドショー(ボタンによる手動)
57    $(".page1").click(function(){
58        // スクロール方向の切り替え(右)
59        dir=1;
60
61        // タイマーを一時停止して再スタート
62        clearInterval(timer);
63        timer=setInterval(slideTimer,interval);
64
65        // タイマーが一時停止してから初回の関数実行
66        slideTimer();
67    });
68    $(".page2").click(function(){
69        // スクロール方向の切り替え(左)
70        dir=-1;
71
72        // タイマーを一時停止して再スタート
73        clearInterval(timer);
74        timer=setInterval(slideTimer,interval);
75
76        // タイマーが一時停止してから初回の関数実行
77        slideTimer();
78
79    });
80
81
82
83});

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

回答3件

自己解決

こちらで回答を得て試したのは下記

別パソコンでテストする
回答で得たコードを書き足す

改善が見られなかったためslickを使ってスライドショーを作る
スライドショーの間隔が早くなる問題は解決。

投稿2020/02/18 01:06

miduki

総合スコア4

js
1
2    // 3000ミリ秒ごと(変数interval)にslideTimer関数を実行
3    timer = setInterval(slideTimer,interval);
4
5↓
6
7    // 3000ミリ秒ごと(変数interval)にslideTimer関数を実行
8    if(timer){clearInterval(timer);}
9    timer = setInterval(slideTimer,interval);