Question

我在website上制作了一个简单的幻灯片，现在想要为它制作动画。我只是希望图像相互淡化。我宁愿不使用jQuery，因为这可能是我在网站上唯一需要的js。如果有必要，jQuery就可以了。

预加载图片（在网站首页）

<!--
var image1=new Image;image1.src="images/referenzen/besten-weine.jpg";var image2=new         Image;image2.src="images/referenzen/pixelization.jpg";var image3=new  Image;image3.src="images/referenzen/immo-buerk.jpg"
//-->

幻灯片放映位置的代码（图片src随后被脚本更改）

 <a href="javascript:slidelink()"><img src="images/referenzen/besten-weine.jpg" name="slide" width="445px" height="300px"></a>
            <script type="text/javascript">
                <!--
                var step=1
                //a variable that will keep track of the image currently being displayed.
                var whichimage=1
                function slideit(){
                if (!document.images)
                return
                document.images.slide.src=eval("image"+step+".src")
                whichimage=step
                if (step<3)
                step++
                else
                step=1
                setTimeout("slideit()",4000)
                }
                slideit()
                function slidelink(){
                if (whichimage==1)
                window.location="#weine"
                else if (whichimage==2)
                window.location="#mc"
                else if (whichimage==3)
                window.location="#immo"
                }
                //-->
            </script>

我可以做一些CSS动画，但我不熟悉javascript。

Answer 1

假设这个HTML：

<div class="slideshow">
    <div class="image-front"><img src="photo1.png" /></div>
    <div class="image-back"><img src="photo2.png" /></div>
</div>

你可以这样做：

.slideshow .image-front {
    transition: .5s;
    transition-property: opacity;
}
.slideshow.transition .image-front {
    opacity: 0;
}

然后在.5秒之后将image-back中的图片交换为image-front。

Answer 2

HTML：

<div>
        <a href="#"><img src="back.png" title="back" id="back"></a>
        <a href="#"><img src="next.png" title="next" id="next"></a>
</div>

<img src="image1.png" id="image1" />
<img src="image2.png" id="image2" />
<img src="image3.png" id="image3" />

Jquery和javascript：

全局变量：

var actual = 1;

转到下一张图片：

$('#next').click(function(){    
    $('img').stop(true, true);
    $('#image' + _actual).fadeOut(function(){
        actual++;
        if(actual > 3){
         actual = 1;
        }
        $('#image' + actual).fadeIn();          
    });
});

转到普通图片：

$('#back').click(function(){    
    $('img').stop(true, true);
    $('#image' + _actual).fadeOut(function(){
        actual--;
        if(actual == 0){
         actual = 3;
        }
        $('#image' + actual).fadeIn();          
    });
});

我刚刚写了这篇文章，没有对它进行测试，但我认为这样可行。

动画简单的JavaScript幻灯片

2 个答案: