jQuery使用导航箭头按顺序在屏幕上/屏幕下设置div动画

我想做的是，通过按方向向左和向右单击导航箭头，按顺序在屏幕上滑动div。当你点击右箭头时，从右向左滑动屏幕，效果很好。我想不出左箭头的代码，所以div会在屏幕上从相反的方向从左向右滑动。这是一把小提琴：

还有一个问题标记为已回答，但答案没有给出导航箭头功能的任何详细信息

代码如下：

HTML

JAVASCRIPT

$('.right').click(function(event) {
$('.current').animate({
    left: '-50%'
}, 500, function() {
    $(this).css('left', '150%');
    $(this).appendTo('#container');
    $(this).removeClass('current');
});

$('.current').next().animate({
    left: '50%'
}, 500, function (){
 $(this).addClass('current');
});


});

$('.left').click(function(event) {
$('.current').animate({
    left: '50%'
}, 500, function() {
    $(this).css('left', '-150%');
    $(this).prependTo('#container');
    $(this).removeClass('current');
});

$('.current').prev().animate({
    left: '-50%'
}, 500, function (){
 $(this).addClass('current');
});


});

工作 试试这个

我已经编辑了你的代码

代码

var i=1；
$（'.right'）。单击（函数（）{
if（i<$（“#容器div”）.长度）{
$（“#盒”+i）.设置动画({
左：“-50%”
}，400，函数（）{
var$this=$（“#box”+i）；
$this.css（'left'，'150%”）
.appendTo（$（“.container”）；
});
$（“#盒”+i）.next（）.animate({
左：“50%”
}, 400);
i++；
}
});
$（'.left'）。单击（函数（）{
如果（i>1）{
$（“#盒”+i）.设置动画({
左：“150%”
}，400，函数（）{
var$this=$（“#box”+i）；
$this.css（'right'，'-150%'））
.appendTo（$（“.container”）；
});
$（“#盒”+i）.prev（）.animate({
左：“50%”
}, 400);
我--；
}
});

---

希望这对您有所帮助，谢谢您使用较少JS和CSS转换的解决方案

帮助

检查工作小提琴：

HTML-class.current已删除：

<div id="box1" class="box">Div #1</div>

JS代码

var boxes = $(".box").get(),
    current = 0;
$('.right').click(function () {
    if (current == (-boxes.length + 1)){
        } else {
        current--;
    updateBoxes();
    }
});

function updateBoxes() {
    for (var i = current; i < (boxes.length + current); i++) {
        boxes[i - current].style.left = (i * 100 + 50) + "%";
    }
}

$('.left').click(function () {
    if (current == 0){
    }else{
    current++;
    updateBoxes();
    }
});

var-box=$（“.box”）.get（），
电流=0；
$（'.right'）。单击（函数（）{
如果（当前==（-box.length+1））{
}否则{
当前--；
updateBoxes（）；
}
});
函数updateBoxes（）{
对于（var i=电流；i<（box.length+电流）；i++）{
框[i-当前].style.left=（i*100+50）+“%”；
}
}
$（'.left'）。单击（函数（）{
如果（当前==0）{
}否则{
电流++；
updateBoxes（）；
}
});

我注意到您的代码仅限于给定数量的框（5）。请检查我下面的答案，以确定div的数量没有限制！你应该尽最大努力维护OP的代码版本，OP已经尝试了一些东西，他只是想完成它。我没有投你反对票，但发现你投了反对票，所以a+1来自me@SarathSprakash实际上，它与OP版本中的代码相同，但是使用CSS3转换而不是动画，并且使用更紧凑的代码方法。结果很好！谢谢你的+1！我不明白为什么我被否决了，投了第二个有效答案：）

var i = 1;
$('.right').click(function () {
    if (i < $('#container div').length) {
        $("#box" + i).animate({
            left: '-50%'
        }, 400, function () {
            var $this = $("#box" + i);
            $this.css('left', '150%')
                .appendTo($('.container'));
        });
        $("#box" + i).next().animate({
            left: '50%'
        }, 400);
        i++;
    }
});
$('.left').click(function () {

    if (i > 1) {
        $("#box" + i).animate({
            left: '150%'
        }, 400, function () {
            var $this = $("#box" + i);
            $this.css('right', '-150%')
                .appendTo($('.container'));
        });
        $("#box" + i).prev().animate({
            left: '50%'
        }, 400);
        i--;
    }
});

<div id="box1" class="box">Div #1</div>

.box {
  position: absolute;
  width: 50%;
  height: 300px;
  line-height: 300px;
  font-size: 50px;
  text-align: center;
  border: 2px solid black;
  left: 150%;
  top: 100px;
  margin-left: -25%;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

}

var boxes = $(".box").get(),
    current = 0;
$('.right').click(function () {
    if (current == (-boxes.length + 1)){
        } else {
        current--;
    updateBoxes();
    }
});

function updateBoxes() {
    for (var i = current; i < (boxes.length + current); i++) {
        boxes[i - current].style.left = (i * 100 + 50) + "%";
    }
}

$('.left').click(function () {
    if (current == 0){
    }else{
    current++;
    updateBoxes();
    }
});