我一直在寻找适用于Ebay的幻灯片脚本,并找到http://xlo.co/blog/web-development/javascript-image-fade?quip_thread=blog-post-19&quip_parent=76这个似乎正常工作的脚本。我想在幻灯片中添加第三个图像,这就是事情开始向南的时候。以下是我从原始页面更改以添加第三个图像的代码。
我放在我插入的任何代码旁边。但是,它可以在第一张图像后停止工作。如果任何人都可以提供帮助,那将会有很大的帮助。
<div id="test">alpha</div>
<div id="slides" style="display: none;">
<div id="slide0" style="background-image: url('/ebay/images/image1.jpg'); width: 670px; height: 240px;">Content0</div>
<div id="slide1" style="background-image: url('/ebay/images/image1.jpg'); width: 670px; height: 240px;">Content1</div>
<!--ADDITION --><div id="slide2" style="background-image: url('/ebay/images/image1.jpg'); width: 670px; height: 240px;">Content2</div>
</div>
<div id="transition" style="width: 670px; height: 240px;">
<!--ADDITION --><div id="imageholder2" style="position: absolute;"></div>
<div id="imageholder1" style="position: absolute;"></div>
<div id="imageholder0" style="position: absolute;"></div>
<!--first last to avoid messing with z-indices-->
</div>
<!-- SCRIPT FUNCTION -->
<script type="text/javascript">
// <![CDATA[
//image transition
var interval = 3000;
var fadeTime = 10;
var currentImage;
var alpha = 100;
var images = new Array();
images[0]=document.getElementById('slide0');
images[1]=document.getElementById('slide1');
<!--ADDITION -->images[2]=document.getElementById('slide2');
var image0Holder = document.getElementById('imageholder0');;
var image1Holder = document.getElementById('imageholder1');;
<!--ADDITION -->var image2Holder = document.getElementById('imageholder2');;
var currentImageHolder = image0Holder;
var currentImage = 0;
var testId = document.getElementById('test');
image0Holder.appendChild(images[0]);
image1Holder.appendChild(images[1]);
<!--ADDITION -->image2Holder.appendChild(images[2]);
function transition() {
function fade() {
if (alpha > 0) {
alpha = alpha - 1;
document.getElementById('test').innerHTML = alpha;
currentImageHolder.style.opacity = (alpha/100);
currentImageHolder.style.MozOpacity = currentImageHolder.style.opacity;
currentImageHolder.style.filter = 'alpha(opacity='+alpha+')';
}
else {
clearInterval(timer0);
document.getElementById('test').innerHTML = "xx";
if (currentImage == image0Holder) {
image0Holder.style.zIndex = 0;
image1Holder.style.zIndex = 1;
<!--ADDITION -->image2Holder.style.zIndex = 2;
alpha = 100;
currentImageHolder.style.opacity = (alpha/100);
currentImageHolder.style.MozOpacity = currentImageHolder.style.opacity;
currentImageHolder.style.filter = 'alpha(opacity='+alpha+')';
currentImageHolder = image1Holder;
image0Holder.removeChild(image0Holder.lastChild);
image0Holder.appendChild(images[currentImage]);
}
else {
image0Holder.style.zIndex = 2;
image1Holder.style.zIndex = 1;
<!--ADDITION -->image2Holder.style.zIndex = 0;
alpha = 100;
currentImageHolder.style.opacity = (alpha/100);
currentImageHolder.style.MozOpacity = currentImageHolder.style.opacity;
currentImageHolder.style.filter = 'alpha(opacity='+alpha+')';
currentImageHolder = image0Holder;
image1Holder.removeChild(image1Holder.lastChild);
image1Holder.appendChild(images[currentImage]);
}
currentImage = (currentImage+1)%images.length;
timer1 = setTimeout(transition, interval);
}
}
timer0 = setInterval(fade, 20);
}
timer1 = setTimeout(transition, interval);
// ]]>
</script>