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

Question

I wan to create a simple carousel that holds an image title and text. When I click the "next" span, it should display the next two <li> . But nothing happens when I do so.

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

Fiddle

See this example .

Answer 1

This is a pure CSS issue. You need only to add position: relative; to your li , so you can effect the left property in your script.

.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
}

Simply try adding that in Chrome Inspector and you'll see it works. Ciao!

Answer 2

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