Question

http://jsfiddle.net/xgpqe4rv/

var i = 1;    
    $('#right').click(function(){
        $('img').attr('src',arr[i]['logo']);
        i++
    });

到目前为止，我只能做到这里，仍然有2个缺少要求。我想要无限循环，意味着当它点击第4项时它会回到1。另一个是后退按钮。

Answer 1

这是针对您的问题的简单解决方案：http://jsfiddle.net/xgpqe4rv/1/。只需输入if语句即可跟踪您的位置，并在i;

时重置i==3

 $('img').attr('src',arr[0]['logo']);

    var i = 1;    
        $('#right').click(function(){

            $('img').attr('src',arr[i]['logo']);

            if(i == 3) {

                i=0;
            }
            else {
            i++;

            }
        });
    });

Answer 2

Demo

试试这个

    var i = 1;    
    $('#right').click(function(){
         if(!$(this).hasClass("active"))
               {
                   i=i+1;
                   $("#left").removeClass("active");
               }
        if(i == 4)
        {
            i=0;
        }
        $('img').attr('src',arr[i]['logo']);
        i++;
        $(this).addClass("active");

    });
    $('#left').click(function(){
            if(!$(this).hasClass("active"))
               {
                   i=i-1;
                   $("#right").removeClass("active");
               }

        if(i == 0)
        {
            i=4;
        }
        $('img').attr('src',arr[i-1]['logo']);
        i--;
        $(this).addClass("active");
    });

带有来回按钮的无限滑块逻辑

2 个答案: