当前位置：文江博客话题详情

在网页上淡入和淡出图像

发布于 2024-12-01 10:55:11 字数 206 浏览 1 评论 0原文

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

示例该网站的内容可以在 GE-Energy 网站的“产品和服务”下找到（向下滚动一点）。

怎么才能达到这样的效果呢？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉城凉梦凉人心 2024-12-08 10:55:11

这种效果是通过使用 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"/>

This effect is achieved by using jQuery to fade the images out and in. In code this would be along the lines of:

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

And the HTML:

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

Edit:

This is the minimum JavaScript you would need in your HTML source:

<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>

And the following 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"/>

回复收藏 0 原文

~没有更多了~