我目前正在制作一个幻灯片,它会同时更改图像、标题 和描述 以及它们的数组
号码。
幻灯片有效但是,我想要完成的是缓慢过渡到下一个/上一个图像(...标题和描述) 当单击“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 .再次感谢。
最佳答案
每次加载新图片时,将其放置在具有相同位置的辅助图像中的原始图片后面:
<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
关于javascript - 如何让 Javascript 图像幻灯片缓慢改变图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36048613/