javascript - 为什么我的点击功能在 jquery 中不起作用？

Question

我想创建一个包含图像标题和文本的简单轮播。当我单击“下一个”跨度时，它应该显示接下来的两个<li>. 但是当我这样做时，什么也没有发生。

<script type="text/javascript">
    $(document).ready(function() {
        $('#right').click(function() {
            $('li').animate({
                left: '-600px'
            }, 500);
        });
    });
</script>

小提琴

请参阅此示例。

Answer 1

这是一个纯粹的 CSS 问题。您只需要添加position: relative;到您的li，因此您可以影响left脚本中的属性。

.carousel-inner li {
  display: inline;
  float: left;
  margin: 20px;
  border: 1px solid #999;
  padding: 25px;
  border-radius: 20px;
  position: relative; // Add this so setting a left position will work
}

只需尝试在 Chrome Inspector 中添加它，您就会看到它有效。再见！

Answer 2

添加position: relative到您的.carousel-inner li。