Question

尝试制作滑动幻灯片循环遍历图像数组;该函数应淡入每个元素，将其转换到另一个位置（通过margin属性），然后逐个淡出。我的代码工作到大约5次迭代，然后开始移动错误的图像。

function transition(){

var preview=$('.noFrame-slideShow-container');
preview.hide();
i=0;

var current=preview.eq(i);
var prevWidth=parseInt(preview.css('width'));
var windowWidth=$(window).width();
distToEnd=windowWidth - (preview.offset().left + prevWidth);
var halfCont=parseInt($('.main-wrap-right-container').css('width'))/3;
var end=distToEnd - (halfCont*2.5);

function beginTransit(){
    var current=preview.eq(i);

    current.fadeIn(500,function(){
        console.log(i + ' i am i');
        current.css('transition','margin-left 1s');
        current.css('margin-left',end);
        current.on('transitionend',function(){
            current.fadeOut(500,function(){
                current.css('transition','');
                current.css('margin-left','0');
                if(i==preview.length-1){
                    i=0;
                    //console.log(i + " i was i")
                }else{
                    i++;
                    //console.log(i + " i was i")
                }
                beginTransit();
            })
        })
    })
}

beginTransit();

Answer 1

试试这个 update var current;

<div class="main-wrap-right-container">
        <div class="noFrame-slideShow-container">1</div>
        <div class="noFrame-slideShow-container">2</div>
        <div class="noFrame-slideShow-container">3</div>
        <div class="noFrame-slideShow-container">4</div>
        <div class="noFrame-slideShow-container">5</div>
    </div>

<script>

            var preview=$('.noFrame-slideShow-container');
            preview.hide();
            var i = 0;

            var current = preview.eq(i);
            var prevWidth = parseInt(preview.css('width'));
            var windowWidth = $(window).width();
            var distToEnd = windowWidth - (preview.offset().left + prevWidth);
            var halfCont = parseInt($('.main-wrap-right-container').css('width'))/3;
            var end = distToEnd - (halfCont*2.5);

            function beginTransit(){

                current.fadeIn(500, function() {

                    current.css('transition','margin-left 1s');
                    current.css('margin-left',end);

                    current.fadeOut(1500, function() {
                        if (i === preview.length-1) {
                            i = 0;
                            console.log('end');
                        } else {
                            console.log('not end');
                            i++;
                        }
                        console.log(i);

                        current = preview.eq(i);
                        current.css('transiton', '');
                        current.css('margin-left', 0);
                        beginTransit();

                    });

                });


            }

            beginTransit();
    </script>

大约5次迭代后CSS转换中断

1 个答案: