如何使Javascript图像幻灯片缓慢更改图像

我目前正在制作一个幻灯片，该幻灯片可以同时更改图像，标题和描述及其Array编号。

幻灯片有效，但是，我试图完成的是缓慢过渡到下一个/上一个图像（...标题和描述），当单击"Next"和"Previous"按钮时。

这可以通过javascript或jquery来完成。
任何帮助或建议将不胜感激。谢谢。

这是HTML：

    <div class="featured">
        <div class="infofeat">
            <div class="infocont">
                <h1>FEATURED</h1>
                    <div id="feat_title">
                        First Title
                    </div>
                    <div id="description">
                        First Description
                    </div>
                <div id="controllers">
                    <a  id="_previous"href="#" onclick="return change_image(-1)" > Previous </a>
                    <a  id="_next"href="javascript:change_image(1)" > Next </a>
                </div>
            </div>
        </div>
        <div class="picfeat">
            <img src="images/designs/tempfeatured.jpg" name="slideshow" />
        </div>
    </div>

这是幻灯片Javascript：

var Image = new Array("images/designs/tempfeatured.jpg", "../images/designs/feat2.jpg", "../images/designs/feat3.jpg");
var Description = new Array ("First description", "Second Description", "Third Description");
var Title = new Array("First Title", "Second Title", "Third Title")
var Image_Number = 0;
var Image_Length = Image.length - 1;
function change_image(num){
    Image_Number = Image_Number + num;
    if (Image_Number > Image_Length){
        Image_Number = 0;
    }
    if (Image_Number < 0){
        Image_Number = Image_Length;
    }

    document.slideshow.src= Image[Image_Number];
    document.getElementById("description").innerHTML = Description[Image_Number];
    document.getElementById("feat_title").innerHTML = Title[Image_Number];
    return false;
}

您可以在 JsFiddle 上对其进行测试 这里 .再次感谢。