Javascript 如何使js滑块反向移动？

我试图让我的滑块朝相反的方向移动，但我不知道如何让它从右向左移动，而是从左向右移动。我可以让它从右向左移动，但我遇到的问题是从右向左移动，它不会保持完整的网格，而是它们之间的一个神秘的间隙。使用从左到右的方法，网格将作为一个巨大的块移动，不会发生任何中断

如何使滑块从右向左移动并在最后一个li处停止，并且只使用左箭头返回，而不是只按右/按钮进行完全环绕

（使用向右和向左箭头键移动滑块）

下面是我的滑块的jS，JSFIDLE有CSS和HTML

jQuery(document).ready(function ($) {
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
    $('#slider').css({
        width: slideWidth,
        height: slideHeight
    });
    $('#slider ul').css({
        width: sliderUlWidth,
        marginLeft: -slideWidth
    });
    $('#slider ul li:last-child').prependTo('#slider ul');
    function moveLeft() {
        $('#slider ul').animate({
            right: -slideWidth
        }, 700, function () {
            $('#slider ul li').prependTo('#slider ul');
            $('#slider ul').css('right', '');
        })
    }
    function moveRight() {
        $('#slider ul').animate({
            right: -slideWidth
        }, 700, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('right', '');
        })
    }
    $('#back').click(function () {
        moveLeft();
    })
    $('#next').click(function () {
        moveRight();
    })

    $(document).keydown(function (e) {
        if (e.keyCode == 39) {
            moveRight();
        } else {

        }
    })
    $(document).keydown(function (e) {
        if (e.keyCode == 37) {
            moveLeft();
        } else {
        }
    })
});

谢谢你的帮助

jQ:

jQuery(function($) {

    var $sl = $('#slider'),
        $ul = $('ul', $sl),
        $li = $('li', $ul),
        slideCount  = $li.length,
        slideWidth  = $li.width(),
        slideHeight = $li.height(),
        sliderUlWidth = slideCount * slideWidth;

    $sl.css({width: slideWidth, height: slideHeight});
    $ul.css({width: sliderUlWidth});

    function moveLeft() {
      $ul.not(':animated').prepend( $('li:last-child', $ul) )
      .css({left:-slideWidth})
      .animate({left:0}, 700);
    }
    function moveRight() {
        $ul.not(':animated').animate({left: -slideWidth}, 700, function() {
          $(this).css({left: 0}).append( $('li:first-child', this) );
        });
    }

    $('#back, #next').click(function() {
        return this.id=='next' ? moveRight() : moveLeft();
    });

    $(document).keydown(function(e) {
        var k = e.which;
        if( k==39 || k==37 ){
            e.preventDefault();
            return k==39? moveRight() : moveLeft();  
        }
    });

});

*{margin:0;padding:0;}
.uni_con {
    margin: 0 auto;
    width: 1200px;
}
#slider {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    background:#cf5;
}
#slider ul {
    position: relative;
    left:0;
    list-style: none;
    background:#f00;
}
#slider ul li {
    float: left;
    background: none;
    width: 1200px;
    background:#555;
    display: inline;
    position: relative;
}
#slider img {
    cursor: pointer;
    float:left;
    height: 400px;
    width: 400px;
}

CSS:

jQuery(function($) {

    var $sl = $('#slider'),
        $ul = $('ul', $sl),
        $li = $('li', $ul),
        slideCount  = $li.length,
        slideWidth  = $li.width(),
        slideHeight = $li.height(),
        sliderUlWidth = slideCount * slideWidth;

    $sl.css({width: slideWidth, height: slideHeight});
    $ul.css({width: sliderUlWidth});

    function moveLeft() {
      $ul.not(':animated').prepend( $('li:last-child', $ul) )
      .css({left:-slideWidth})
      .animate({left:0}, 700);
    }
    function moveRight() {
        $ul.not(':animated').animate({left: -slideWidth}, 700, function() {
          $(this).css({left: 0}).append( $('li:first-child', this) );
        });
    }

    $('#back, #next').click(function() {
        return this.id=='next' ? moveRight() : moveLeft();
    });

    $(document).keydown(function(e) {
        var k = e.which;
        if( k==39 || k==37 ){
            e.preventDefault();
            return k==39? moveRight() : moveLeft();  
        }
    });

});

*{margin:0;padding:0;}
.uni_con {
    margin: 0 auto;
    width: 1200px;
}
#slider {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    background:#cf5;
}
#slider ul {
    position: relative;
    left:0;
    list-style: none;
    background:#f00;
}
#slider ul li {
    float: left;
    background: none;
    width: 1200px;
    background:#555;
    display: inline;
    position: relative;
}
#slider img {
    cursor: pointer;
    float:left;
    height: 400px;
    width: 400px;
}

jQ:

jQuery(function($) {

    var $sl = $('#slider'),
        $ul = $('ul', $sl),
        $li = $('li', $ul),
        slideCount  = $li.length,
        slideWidth  = $li.width(),
        slideHeight = $li.height(),
        sliderUlWidth = slideCount * slideWidth;

    $sl.css({width: slideWidth, height: slideHeight});
    $ul.css({width: sliderUlWidth});

    function moveLeft() {
      $ul.not(':animated').prepend( $('li:last-child', $ul) )
      .css({left:-slideWidth})
      .animate({left:0}, 700);
    }
    function moveRight() {
        $ul.not(':animated').animate({left: -slideWidth}, 700, function() {
          $(this).css({left: 0}).append( $('li:first-child', this) );
        });
    }

    $('#back, #next').click(function() {
        return this.id=='next' ? moveRight() : moveLeft();
    });

    $(document).keydown(function(e) {
        var k = e.which;
        if( k==39 || k==37 ){
            e.preventDefault();
            return k==39? moveRight() : moveLeft();  
        }
    });

});

*{margin:0;padding:0;}
.uni_con {
    margin: 0 auto;
    width: 1200px;
}
#slider {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    background:#cf5;
}
#slider ul {
    position: relative;
    left:0;
    list-style: none;
    background:#f00;
}
#slider ul li {
    float: left;
    background: none;
    width: 1200px;
    background:#555;
    display: inline;
    position: relative;
}
#slider img {
    cursor: pointer;
    float:left;
    height: 400px;
    width: 400px;
}

CSS:

jQuery(function($) {

    var $sl = $('#slider'),
        $ul = $('ul', $sl),
        $li = $('li', $ul),
        slideCount  = $li.length,
        slideWidth  = $li.width(),
        slideHeight = $li.height(),
        sliderUlWidth = slideCount * slideWidth;

    $sl.css({width: slideWidth, height: slideHeight});
    $ul.css({width: sliderUlWidth});

    function moveLeft() {
      $ul.not(':animated').prepend( $('li:last-child', $ul) )
      .css({left:-slideWidth})
      .animate({left:0}, 700);
    }
    function moveRight() {
        $ul.not(':animated').animate({left: -slideWidth}, 700, function() {
          $(this).css({left: 0}).append( $('li:first-child', this) );
        });
    }

    $('#back, #next').click(function() {
        return this.id=='next' ? moveRight() : moveLeft();
    });

    $(document).keydown(function(e) {
        var k = e.which;
        if( k==39 || k==37 ){
            e.preventDefault();
            return k==39? moveRight() : moveLeft();  
        }
    });

});

*{margin:0;padding:0;}
.uni_con {
    margin: 0 auto;
    width: 1200px;
}
#slider {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    background:#cf5;
}
#slider ul {
    position: relative;
    left:0;
    list-style: none;
    background:#f00;
}
#slider ul li {
    float: left;
    background: none;
    width: 1200px;
    background:#555;
    display: inline;
    position: relative;
}
#slider img {
    cursor: pointer;
    float:left;
    height: 400px;
    width: 400px;
}

---

谢谢你，你是个老板，你把这件事弄明白了3我上周刚开始学习jS，我用尽了所有的方法让滑块像你的例子一样移动到一个完整的网格，但我没能把它做好。非常感谢P@Monstr92哦，没问题，只要一个星期你就很好了！如果您对我的代码有任何疑问，请随时了解更多。谢谢，我非常喜欢您的语法格式。我唯一的问题是，我如何添加if语句，以便当用户点击最后一个li（第二页）时，他们无法绕过第一个li，而被迫使用“后退”按钮？@Monstr92请给我一分钟时间在在线演示中向您展示。谢谢，您是一位老板，能够解决这个问题！：3我上周刚开始学习jS，我用尽了所有的方法让滑块像你的例子一样移动到一个完整的网格，但我没能把它做好。非常感谢P@Monstr92哦，没问题，只要一个星期你就很好了！如果您对我的代码有任何疑问，请随时了解更多。谢谢，我非常喜欢您的语法格式。我唯一的问题是，我如何添加一个if语句，以便当用户点击最后一个li（第二页）时，他们无法转到第一个li，而被迫使用“后退”按钮？@Monstr92请给我一分钟时间在在线演示中向您展示。