有没有更好的方法来编写更改图像函数

Question

我写了一个每3秒更改一次图像的函数。我的问题是，这是一种可以接受的实现这一目标的方法，还是有更好的方法？我问这个问题的原因是，这里的一些例子似乎有点过于复杂。这让我质疑这些例子中的复杂性是否存在是有原因的，以及我是否遗漏了什么。谢谢

            let timeout= function(){   
               //encapsulates data
                let index=0;
                let images=["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRchcI27Cam2YzkA2vKlTimh6nvER7utm_HyjPu7gjlsljInp9L","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRchcI27Cam2YzkA2vKlTimh6nvER7utm_HyjPu7gjlsljInp9L","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS10D58-5V5cDC8V3vcHC4xKTFqGsnGg4ONyW6Khy-8iWJ9Xzy5xQ"];
                $(".gallery").attr("src",images[index]);//sets starting image
                return{
                    run: function(){
                        !function timeout(){
                            function changeImg(){
                                if(index===images.length-1){//resets cycle if needed
                                    index=0;
                                }
                                else{
                                    index++
                                }
                                $(".gallery").attr("src",images[index]);//changes image
                                timeout();//repeats
                            }
                            setTimeout(changeImg,3000);
                        }();
                    }
                }
            }();
            timeout=timeout.run;//redefines timeout as its returned object function  run
            timeout();//calls timeout

Answer 1

总有更好的方法来编写所有内容。 :)

这是我的尝试：

https://jsfiddle.net/f1cgohh3/4/

let slide = document.getElementById('slide');
let slideIdx = 0;
let slides = [
  'http://via.placeholder.com/350x150/ff0000',
  'http://via.placeholder.com/350x150/00ff00',
  'http://via.placeholder.com/350x150/0000FF'
];
let slideShow = () => {
  slideIdx = slideIdx < slides.length - 1 ? slideIdx + 1 : 0;
  slide.src = slides[slideIdx];
};
slideShow();
setInterval(slideShow, 1000);