Question

我目前正在制作幻灯片，可以同时更改图像，标题和描述 {{ 1}}数字。

幻灯片显示 BUT ，我想要完成的是慢转换到下一个/上一个图片（...标题＆amp; description）当＆＃34; Array＆＃34;和＆＃34; Next＆＃34;单击按钮。

这可以使用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

您可以在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

Answer 2

我认为您可以使用css3进行操作，查看此页并告诉我它是否有用：http://css3.bradshawenterprises.com/cfimg/

如何制作Javascript图像幻灯片缓慢更改图像？

2 个答案: