javascript - 如何让 Javascript 图像幻灯片缓慢改变图像？

Question

我目前正在制作一个幻灯片，它会同时更改图像、标题 和描述 以及它们的数组 号码。

幻灯片有效但是，我想要完成的是缓慢过渡到下一个/上一个图像(...标题和描述) 当单击“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 上测试它 here .再次感谢。

Answer 1

每次加载新图片时，将其放置在具有相同位置的辅助图像中的原始图片后面:

    <div class="picfeat">
        <img src="images/designs/tempfeatured.jpg" name="slideshow" style="position: absolute; z-index: 5" />
        <img src="images/designs/feat2.jpg" name="slideshow" style="position: relative; z-index: -5" />
    </div>

然后用 jQuery 淡化第一张图片:

$('.picfeat:first-child').fadeOut(2000); // really slow