2

我正在尝试制作一个循环显示多个图像的图像推子（此处为 3 个）。我做了这个函数来循环和淡入正确的图像，它可以工作，淡出一个图像，同时淡入下一个图像，这样就没有空白空间。除了当它到达数组的末尾时，函数会淡出数组中的最后一个图像，然后再循环回来并再次淡入第一个图像，从而创建第二个空白空间。

Javascript

<script type="text/javascript">
        var img_arr = [
            '#img1',
            '#img2',
            '#img3'
        ]
        var i = 0;
        arr_length = img_arr.length;
        //fade function
        function fade_gal() {
            $(img_arr[i])
                .animate(
                    {opacity: '1.0' }, 500
                );
            $('.img').delay(3000).animate({opacity: 0.0}, 500);
            i = i + 1;
            if (i == arr_length) {
                i = 0;
            }
        }
        $(document).ready(function img_gallery() {
            //initial function
            fade_gal();
            //set function interval
            setInterval( function() {fade_gal()}, 3500);
        })
    </script>


html

<div id="scroller">
            <img src="../../images/1.jpg" alt="img1" width="300px" id="img1" class="img"/>
            <img src="../../images/2.jpg" alt="img1" width="300px" id="img2" class="img"/>
            <img src="../../images/3.jpg" alt="img1" width="300px" id="img3" class="img"/>
        </div>
4

3 回答 3

1

我看不出有理由在每次运行时淡化所有图像......

如果您的图像是绝对定位且没有 z-index，则存在顶部和底部。

您所要做的就是将顶部图像淡出，完成后，将其发送到堆的底部。

您可以这样编码（已编辑）（这是一个小提琴：http: //jsfiddle.net/txLet/）：

//fade function
function fade_gal() {
    var container = $('#container');
    var imgs = $('img',container);
    var img = imgs.last();
    img.animate({opacity: '0'}, {duration: 500, complete: function(){
        container.prepend(img); //send image to bottom
        img.css({opacity: 1});
    }});
}
$(document).ready(function img_gallery() {
    //initial function
    fade_gal();
    //set function interval
    setInterval(fade_gal,2000);
})​
于 2012-09-30T18:20:52.203 回答
1

您的代码让我感到困惑，并不是说它是错误的。我无法弄清楚时间。

这是我的版本：（jsFiddle）

var img_arr = [
    '#img1',
    '#img2',
    '#img3'
    ];



arr_length = img_arr.length;
var i = arr_length;
//fade function

$('.img').css('opacity', 0.0);

function fade_gal() {

    $(img_arr[(i-1)%arr_length]).animate({opacity: 0.0}, 500);
    $(img_arr[i%arr_length]).animate({opacity: 1.0}, 500);

    i++;
}

$(document).ready(function () {
    //initial function
    fade_gal()

    //set function interval
    setInterval(function() {
        fade_gal()
    }, 3500);
})​
于 2012-09-30T18:28:42.043 回答
0

尝试更改此行：

$('.img').delay(3000).animate({opacity: 0.0}, 500);

对此：

$(img_arr[i]).delay(3000).animate({opacity: 0.0}, 500);

我有一种感觉，淡出和淡入之间存在冲突。

于 2012-09-30T18:12:33.147 回答