如何使用javascript/Jquery设置用于制作图像滑块的setInterval动画？

图像正在突然变化，我希望它们具有幻灯片效果。

HTML

<div><img src="1.jpg" id="sliderImage"></div>

---

实现这一点的最简单方法是使用css实现转换效果，使用javascript设置计时器。它还有助于在列表中组织元素。 由于同源策略，您无法在下面的代码中看到图像。在本地尝试并下载图像，它应该可以工作

这里是一个简单的滑块，我已经建立

document.ready=function（）{
var slides=document.querySelectorAll（“#slider li”）；
var位置=0；
幻灯片[位置].style.transition='0s'；
幻灯片[位置].style.left='1200px'；
var myInterval=setInterval（startSlider，4000）；
函数startSlider（）{
如果（位置==3）{
幻灯片[位置].style.transition='0s'；
幻灯片[位置].style.left='1200px'；
位置=0；
幻灯片[位置].style.transition='2s'；
幻灯片[位置].style.left=0；
}
否则{
幻灯片[位置].style.transition='0s'；
幻灯片[位置].style.left='1200px'；
位置++；
幻灯片[位置].style.transition='2s'；
幻灯片[位置].style.left=0；
}
}
}();
.container{
宽度：1200px；
盒影：5px5px35px0pxRGBA（0,0,0,0.4）；
-网络工具包盒阴影：5px 5px 35px 0px rgba（0,0,0,0.4）；
-moz盒阴影：5px5px35px0pxRGBA（0,0,0,0.4）；
溢出：隐藏；
保证金：0自动；
填充：5%；
}
#滑块{
宽度：1200px；
高度：400px；
位置：相对位置；
溢出：隐藏；
左侧填充：0；
保证金：0自动；
}
#李滑块{
宽度：100%；
位置：绝对位置；
左：1200像素；
排名：0；
可见性：隐藏；
不透明度：0；
过渡：2s；
}
#滑动式直线感应电机{
宽度：100%；
}
#滑块按钮{
文本对齐：居中；
}
#滑块按钮ulli{
显示：内联块；
宽度：8px；
高度：8px；
边框：3px实心#afafaf；
边界半径：50%；
利润率：0.3倍；
光标：指针；
}
#滑块按钮ul li.active{
背景色：#249CD8；
}
#滑块按钮：悬停{
背景色：#6767；
}
#影响{
边缘底部：30px；
}
#效果h4，#效果选择{
显示：内联块；
}
#效果选择{
最小宽度：150px；
}

简单滑块







var myImage = document.getElementById("sliderImage");
var imageArray = ["1.jpg","2.jpg","3.jpg"];
var imageIndex = 0;

function changeImage() {
                        myImage.setAttribute("src",imageArray[imageIndex]);
                        imageIndex++;
                        if (imageIndex >= imageArray.length){imageIndex = 0;}
                        }

var intervalHandle = setInterval(changeImage,5000);