1

我一直在寻找适用于 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>
4

0 回答 0