Question

我有一个594vw宽的父div，其中每个50vw宽度为8个div，总余量为16个= 66vw。我想在两侧都有箭头，如果你点击其中一个，它应该向左或向右滑动66vw。虽然右箭头完全正常并且在594vw回到零点，但我仍然无法在左侧进行，这意味着：

如果我点击第一张图片上的左箭头（进入+ 66vw）它应该反弹回0vw，而当我在div 2-8时，它应该回到+ = 66vw步。

如何将click功能与if功能结合使用？

我想单击左箭头将每个66vw返回到上一个图像/ div，但如果父div“left”参数超过+ 66vw，我希望它返回到第一个图像。

这单独工作正常（没有div回到+ 66vw只是每66vw步骤无休止）：

$( ".arrow_left" ).click(function(e) {
$("#instafeed").animate({ left: "+=66"+'vw' }, "slow" )});

但是一旦我添加了这段代码，每次无论从哪一点点击左箭头都会跳到0点（所以无论div 1,2,3都回到0）

if($('#instafeed[style*="left: 66vw"]') ){
click = 1; 
$("#instafeed").animate({ left: "0"+'vw'  }, "slow" )}; });

我已经尝试过CSS选择器和JavaScript但没有成功，我真的想在vw而不是px中执行此操作。我已经看到了如何将px转换为vw，但它对我不起作用，加上它太复杂了。

Answer 1

评论中的OP：

我实际上解决了它。

刚刚使用offset().left并设置了＆gt; 0然后添加if条件，它的工作原理。

var click = 1;
$(".arrow_left").click(function(e) {
    var widths = 66 * click;
    $("#instafeed").first().animate({
        "left": "+=66" + 'vw'
    }, "slow").next().animate().end();
    click++;
    if ($('#instafeed').offset().left > 0) {
        click = 1;
        $("#instafeed").animate({
            "left": "0" + 'vw'
        }, "slow")
    }
});

单击左箭头时div图像滑块向左移动

1 个答案: