javascript - javascript スライダー イベント onclick を一時停止して再生する

Question

ウェブサイトのコーディングを終了し、ランディング ページに画像スライダーを追加しています。私は JavaScript に非常に慣れていないので、画像スライダーのデモをコピーして貼り付け、必要に応じて少し調整しました。次の間隔でフェードインする 4 つの画像があります。私が今やりたいことは、画像のいずれかをクリックすると、自動再生スライドショーが一時停止し、クリックして再開できるようにすることです。フォーラムやチュートリアルを見て一日中いじっていましたが、とても迷っています。どんな助けでも大歓迎です。ありがとう。

HTML

 <ul id="slider">
  <li><img src="images/img1.png"/></li>
  <li><img src="images/img2.png"/></li>
  <li><img src="images/img3.png"/></li>
  <li><img src="images/img4.png"/></li>
</ul>

JavaScript

<script>
$(function () {
    var change_img_time = 5000;
    var transition_speed = 100;
    var simple_slideshow = $("#slider"),
        listItems = simple_slideshow.children('li'),
        listLen = listItems.length,
        i = 0,
        changeList = function () {
            listItems.eq(i).fadeOut(transition_speed, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(transition_speed);
            });
        };
    listItems.not(':first').hide();
    setInterval(changeList, change_img_time);
});
</script>