我是一名摄影师,最近一直在重新设计我的网站。我使用了我在一个非常有用的网站上找到的幻灯片代码,并且能够通过删除自动播放、自定义下一个、上一个按钮等来根据我的需要对其进行自定义......这真的很简单,而且看起来效果很好现在。
但我有一个问题。是否可以在不完全重写代码的情况下为图像过渡添加淡入淡出效果?几天来,我一直在搜索 javascript/jquery 代码,并且遇到了许多提供代码的网站,但我找不到任何可以让我将其实施到现有画廊中的网站。这是我的代码的样子;
<body>
<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();
// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["/images/portrait/image1.jpg", "", "Image Title 1"];
theimage[1]=["/images/portrait/image2.jpg", "", "Image Title 2"];
theimage[2]=["/images/portrait/image3.jpg", "", "Image Title 3"];
theimage[3]=["/images/portrait/image4.jpg", "", "Image Title 4"];
theimage[4]=["/images/portrait/image5.jpg", "", "Image Title 5"];
theimage[5]=["/images/portrait/image6.jpg", "", "Image Title 6"];
theimage[6]=["/images/portrait/image7.jpg", "", "Image Title 7"];
theimage[7]=["/images/portrait/image8.jpg", "", "Image Title 8"];
///// Plugin variables
playspeed=0;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;
//###########################################
window.onload=function(){
//preload images into browser
preloadSlide();
//set the first slide
SetSlide(0);
}
//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;
//switch the image
document.images.imgslide.src=theimage[i][0];
//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];
//if they want current slide number and total
document.getElementById('slidecount').innerHTML= ""+(i+1)+" / "+theimage.length;
}
//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}
</script>
<!-- slide show HTML -->
<form name="slideshow">
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td align="left">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</td>
</tr>
<tr>
<td align="left"><div id="slidebox"></div></td>
</tr>
<tr>
<td height="30px" align="left" valign="bottom">
<a style="text-decoration:none;" href="javascript:SetSlide(i-1);" onfocus="this.blur()">Prev</a> |
<a style="text-decoration:none;" margin-left:2px"; href="javascript:SetSlide(i+1);" onfocus="this.blur()">Next</a>
<div style="display:inline; margin-left:10px" align="left" id="slidecount"></div>
</td>
</tr>
</table>
</form>
<!-- end of slide show HTML -->
</body>
谢谢!