如何制作无限轮播 JQuery？答案

【问题标题】：How Can I make an Infinite Carousel JQuery?如何制作无限轮播 JQuery？
【发布时间】：2017-09-13 07:40:27
【问题描述】：

我正在尝试使用 JQuery 制作无限轮播，问题是当我转到最终图像时它只是进入白屏，对此的修复是返回上一个图像，我知道这是因为每个图像在另一个之下，但是我怎样才能让它循环，以便在我单击下一步时它会转到第一张图像，或者至少返回上一张图像？

var sliderList;
$(function() {

  var sliderWrapper = $("#slider");
  sliderList = sliderWrapper.children("ul");
  var sliderItems = sliderList.children("li");

  function animateSlider(direction, duration) {
    if (direction === "+") {
      sliderList.animate({
        "margin-left": "+=800px"
      }, duration);
    } else if (direction === "-") {
      sliderList.animate({
        "margin-left": "-=800px"
      }, duration);
    }
  }

  $(".button").on('click', function() {
    if ($(this).hasClass("back")) {
      animateSlider("+", 1000);
    } else {
      animateSlider("-", 1000);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="slider">
  <ul>
    <li><img src="img/room1.jpg" alt="hotel room" /></li>
    <li><img src="img/room2.jpg" alt="hotel room" /></li>
    <li><img src="img/room3.jpg" alt="hotel room" /></li>
    <li><img src="img/room4.jpg" alt="hotel room" /></li>
  </ul>

【问题讨论】：

请更新我为您制作的 sn-p 以包含正确的图像（lorem 像素）和所需的 CSS - 您可能需要查看 margin-left 是否为 0 并且您是左方向，设置到 800*4，当 800*4 向右时，设置为 0

标签： jquery html carousel infinite

【解决方案1】：

检查sliderItem是否是列表的最后一项，然后根据+或-将动画设置为0或结尾

$(function() {

  var sliderWrapper = $("#slider");
  sliderList = sliderWrapper.children("ul");
  var sliderItems = sliderList.children("li");
  var count = 0;

  function animateSlider(direction, duration) {
    if (direction === "+") {
       if(sliderItems.length === count){
         sliderList.animate({
        "margin-left": "-=2400px"//go back to original 
      }, duration);
       }else{
          sliderList.animate({
          "margin-left": "+=800px"
          }, duration);
        }
       count++;
     }

类似的东西。然后反其道而行之

【讨论】：