Question

我有一个我想要实现的图像滚动条。图像滚动有效，但它是垂直移动而不是水平移动。这是我到目前为止所得到的：

<a href = "#" id = "btnNext">Next Image</a>

$('#btnNext').click(function () {
    //Calls new image with value true, meaning next image
    newImage(true);
    return false;
});

function newImage(direction) {
  //Get the current selected item (with selected class), if none was found, get the first item
  current_image = $('#imageGallery li.selected').length ? $('#imageGallery li.selected') : $('#imageGallery li:first');

  //If determines slideshow direction
  if (direction) {    //Next image
      //Get next sibling
      next_image = (current_image.next().length) ? current_image.next() :  $('#imageGallery li:first');
  } else {    //Previous image
      //Get previous sibling
      next_image = (current_image.prev().length) ? current_image.prev() :  $('#imageGallery li:last');
  }

  //Clear selected class
  $('#imageGallery li').removeClass('selected');

  //Reassign selected class to current image
  next_image.addClass('selected');

  //Scroll images
  $('#images').scrollTo(next_image, 800);
}

更新：以下是我的问题： 1）如何编辑它以使其水平移动？ 2）有没有办法在不使用.scrollTo（）的情况下制作这样的图像滚动条？

Answer 1

我假设你想让画廊水平移动，而不是垂直移动。（你在问题中都说。）这只是一个CSS问题：将列表更改为水平显示（例如display: inline-block或float: left）并且scrollTo插件应该为您执行此操作。

可以在没有scrollTo插件的情况下执行此操作。该插件使用jQuery动画功能在页面上移动，如果您愿意，也可以执行相同操作。 :)这是一个快速的jsFiddle，它使用动画在图库中移动图片。显然它需要相当多的工作（不会回到最后一张照片的开头，只有1路，不计算图片宽度等），但它应该会让你知道它是如何做的完成。

http://jsfiddle.net/meloncholy/KzBzT/

Jquery图像滚动器不切换到下一个图像

1 个答案: