javascript/jquery:查找图像淡入淡出脚本

Question

我正在寻找一个轻量级的脚本(最好是纯javascript )-它应该是用于平滑地将一系列图像相互淡入(=image-carousel)。还可以运行多个实例(因此它应该是一个原型脚本)，例如：- site banner:一个接一个地淡入淡出3个图像-主要内容:3个图库，每个淡入淡出3-5个图像

有什么建议可以使用哪个脚本来实现这个目的吗？

谢谢!

Answer 1

我用过jQuery CrossSlide plugin，它工作得很好。

Answer 2

您好，我已经编写了一个简单的脚本，它利用了jQuery、.fadeOut()和.fadeIn()方法，以及几行html和css。有了编号为1到n的图像元素的ids，该算法可以轻松地迭代图像，并在到达最后一幅图像时重新开始。它可以很容易地调整为使转换在特定的时间延迟后自动发生，而不是在单击按钮时触发。如果这有帮助，请告诉我。代码如下：

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