javascript/jquery：寻找图像淡入淡出脚本

发布于 2024-09-12 18:05:16 字数 192 浏览 10 评论 0原文

我正在寻找一个轻量级脚本（首选纯javascript） - 它应该用于将一系列图像平滑地淡入彼此（= image-carousel）。它还应该可以运行多个实例（因此它应该是一个原型脚本），例如： - 网站横幅：3 张图像相继褪色 - 主要内容：3 个画廊，每个画廊有 3-5 张褪色图像，

有什么建议用于该目的使用哪个脚本？

谢谢！

原文

分享到QQ

分享到微博

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

发布评论

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

弱骨蛰伏 2024-09-19 18:05:16

您好，我编写了一个简单的脚本，它使用 jQuery .fadeOut() 和 .fadeIn() 方法以及几行 html 和 css。通过编号为 1 到 n 的图像元素的 id，算法可以轻松地迭代图像，并在到达最后一个图像时重新开始。它可以很容易地进行调整，使转换在一定时间延迟后自动发生，而不是通过单击按钮触发。让我知道这是否有帮助。这是代码：

<style type="text/css">
        #images{ overflow:auto; }
        .current{ display:inline; }
        .hidden{ display:none; }            
</style>

<script type="text/javascript" >

    function doFade(current){

        var speed = 500;
        next = $("#"+(parseInt(current.attr("id")) + 1));
        if(next.length <= 0) next = $("#1");
        current.fadeOut(speed, 
            function fadeNextIn(){
                current.attr("class", "hidden");
                next.fadeIn(speed, 
                    function afterFadeNextIn(){
                        next.attr("class","current");
                    }
                );
            }
        );
    }

    $(document).ready(
        function () {
            $("#btnNext").click( 
                function(){ 
                    doFade($("#images .current"));
                }
            );
        }
    );

</script>

<div id="images">

    <img id="1" title="image 1" alt="image 1" src="1.jpg" class="current" />
    <img id="2" title="image 2" alt="image 2" src="2.jpg" class="hidden" />
    <img id="3" title="image 3" alt="image 3" src="3.jpg" class="hidden"/>
    <img id="4" title="image 4" alt="image 4" src="4.jpg" class="hidden"/>

</div>

<input id="btnNext" type="button" value="next" />

Hi I've written a simple script which makes use of the jQuery .fadeOut() and .fadeIn() methods along with a few lines of html and css. With the ids for the image elements numbered 1 to n the algorithm can easily iterate through the images and start again when it gets to the last image. It could be easily adapted to make the transitions occur automatically after a certain time delay instead of firing on a button click. Let me know if this helps. Here's the code:

<style type="text/css">
        #images{ overflow:auto; }
        .current{ display:inline; }
        .hidden{ display:none; }            
</style>

<script type="text/javascript" >

    function doFade(current){

        var speed = 500;
        next = $("#"+(parseInt(current.attr("id")) + 1));
        if(next.length <= 0) next = $("#1");
        current.fadeOut(speed, 
            function fadeNextIn(){
                current.attr("class", "hidden");
                next.fadeIn(speed, 
                    function afterFadeNextIn(){
                        next.attr("class","current");
                    }
                );
            }
        );
    }

    $(document).ready(
        function () {
            $("#btnNext").click( 
                function(){ 
                    doFade($("#images .current"));
                }
            );
        }
    );

</script>

<div id="images">

    <img id="1" title="image 1" alt="image 1" src="1.jpg" class="current" />
    <img id="2" title="image 2" alt="image 2" src="2.jpg" class="hidden" />
    <img id="3" title="image 3" alt="image 3" src="3.jpg" class="hidden"/>
    <img id="4" title="image 4" alt="image 4" src="4.jpg" class="hidden"/>

</div>

<input id="btnNext" type="button" value="next" />

回复收藏 0 原文