Javascript 自动更改图像

如何通过动画使图像自动更改？这是我在Javasript中的代码：

var ary=[
    'images/image1.png',            
    'images/image2.jpg',
    'images/image3.jpg',
    'images/image4.jpg',
    'images/image4.jpg',
    'images/image4.jpg'
];

function Slide(id,ary,nu){
    document.getElementById(id).src=ary[nu];
    Slide[id]={nu:nu};  
}

function nextImage(id,ary,ud){
    var nu=(Slide[id]&&Slide[id].nu?Slide[id].nu:0)+ud;  
    Slide(id,ary,Math.min(Math.max(nu,0),ary.length-1));
}

谢谢你的回答。

来试试这个

  var ary=[
    'images/image1.png',            
    'images/image2.jpg',
    'images/image3.jpg',
    'images/image4.jpg',
    'images/image4.jpg',
    'images/image4.jpg'
];
var counter = 0;
setInterval(function() {slideshow();}, 4000);
maxCounter = ary.length;
function slideshow() {
    img.style.backgroundImage = "url("+arr[i]+")";
    if (counter == maxCounter) {
        counter = 0;
    } else {
        counter++;
    }

为了一些动画

HTML

#img{
    -webkit-transition:background-image 1s linear;
    -moz-transition:background-image 1s linear;
    transition:background-image 1s linear;
}

<div id='img'></div>