如何制作一个jquery旋转木马

Question

jquery的

  $('img').click(function() {
    $('#carousel-container').toggle();
    var img = $(this).attr('src');
    var left = $(this).prev().attr('src');
    var right = $(this).next().attr('src');
    $("#carousel").attr('src', img);

    $('#carousel-right').click(function() {
      $('#carousel').attr('src', right);
    });

    $('#carousel-left').click(function() {
      $('#carousel').attr('src', left);
    });
  });

HTML

img(src='images/img1.jpg')
img(src='images/img2.jpg')
img(src='images/img3.jpg')
img(src='images/img4.jpg')
img(src='images/img5.jpg')
img(src='images/img6.jpg')
img(src='images/img7.jpg')
img(src='images/img8.jpg')
img(src='images/img9.jpg')
img(src='images/img10.jpg')
img(src='images/img11.jpg')
img(src='images/img12.jpg')
img(src='images/img13.jpg')
img(src='images/img14.jpg')
img(src='images/img15.jpg')
img(src='images/img16.jpg')

我希望在点击图像时弹出旋转木马，显示点击的图像。然后有左右按钮循环显示图像。但我不知道如何在图像中循环。

Answer 1

你可以使用Bootstrap carousel它很容易使用它。