在网页上淡入淡出图像

Question

我希望创建一个点击触发的图像轮播，例如，如果您单击按钮，图像淡入，当您单击下一个选项的另一个按钮时，当前图像淡出并且a按钮图像淡入

可以在GE-Energy website上的产品和服务下找到此网站的示例（向下滚动）。

如何实现这种效果？

Answer 1

这种效果是通过使用jQuery淡出图像来实现的。在代码中，这将是以下几行：

$('#image1').fadeOut();
$('#image2').fadeIn();

HTML：

<img src="first_image.jpg" id="image1"/>
<img src="second_image.jpg" id="image2"/>

修改

这是您在HTML源代码中需要的最低JavaScript：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#showfirst').click(function(e) {
        if($('#image1').css('display') != 'none') return;
        $('#image2').fadeOut();
        $('#image1').fadeIn();
        e.preventDefault();
    });
    $('#showsecond').click(function(e) {
        if($('#image2').css('display') != 'none') return;
        $('#image1').fadeOut();
        $('#image2').fadeIn();
        e.preventDefault();
    });
</script>

以下HTML：

<a href="#" id="showfirst">Show first image</a>
<a href="#" id="showsecond">Show second image</a>
<img src="first_image.jpg" id="image1"/>
<img src="second_image.jpg" id="image2" style="display:none"/>