Question

我正在尝试用HTML，CSS创建一个图库。并使用JavaScript来动画转换。我设法让它工作，所以我决定我想在它内部循环，这样当它到达最后一个图像（第4个）时它将循环 - 转换回第一个，并继续执行序列直到它得到再到最后。

下载查看该网站以了解我的问题 - https://drive.google.com/folderview?id=0B8HDvQ3oZFi6MG5GLTBFWGNmZkU&usp=sharing

我已经尝试了很多方法，我已经让它循环好了。我的整个代码：

var imagenum = 0;
var currentimg = 1;
var maxwidth = 0;

$(document).ready(function() {

    var Div1 = $("#ip").offset().top;
    var Div3 = $("#flash").offset().top;

    $(window).scroll(function() {    
        if($(window).scrollTop() < Div3) { 
            $("#ip").fadeIn(400); 
        }
        else if($(window).scrollTop() > Div3) { 
            $("#ip").fadeOut(400);
        }});
    });

    $(document).ready(function() {

        $( '.G-li' ).each(function() {
            imagenum++;
            maxwidth += 830;
        });

        $( '.G-ul' ).css('width' , maxwidth + 'px');

        $( '.rightbtn-inner' ).click(function(){
            moveLeft();
        });

        $( '.leftbtn-inner' ).click(function(){
            moveRight();
        });

        timer();
        loop();

    });

    function moveLeft() {
        if( currentimg < imagenum ) {
            $( '.G-ul' ).animate( {'marginLeft' : '-=820px' } , 1000 , 'swing' );
            currentimg = currentimg + 1;
        }
    }

    function moveRight() {
        if( currentimg > 1 ) {
            $( '.G-ul' ).animate( {'marginLeft' : '+=820px' } , 1000 , 'swing' );
            currentimg = currentimg - 1;
        }
    }

    function timer() {
        setInterval(moveLeft, 10000);   
    }

    function loop() {
        if( currentimg = imagenum ) {
            setInterval(loopbk, 10000);
            currentimg = 1; // I did the reset here     
    }

    function loopbk() {
        $( '.G-ul' ).animate( {'marginLeft' : '+=2460px' } , 1000 , 'swing' );
        /* currentimg = 1; // and tried reset here */
    }

}

为了让它继续正常进行，我必须将变量currentimg重置为1才能使其正常工作。但是，如果我在函数currenting = 1中loop()，它会转到最后一张图像并继续执行另一张图像，直到循环回来。

或者如果我将重置放在函数loopbk()中，它会完美地循环直到第二个图像，然后继续循环，导致向左移动。

有人可以玩这个，并帮助我从我的眼睛这应该工作，但它没有 - 我已经试图解决这个很长一段时间。

感谢任何有帮助的人。

安迪。

JavaScript - 循环图像库确实循环正确

0 个答案: