html点击按钮滚动图,基于jquery实现点击左右按钮图片横向滚动

可以使用jquery的animate()函数实现图片横向滚动的效果，具体实现步骤如下：

1. HTML结构：使用ul和li标签实现图片列表，并添加左右按钮。

<div class="scroll-container">
  <ul class="scroll-list">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
  </ul>
  <div class="scroll-btn scroll-btn-left"></div>
  <div class="scroll-btn scroll-btn-right"></div>
</div>

2. CSS样式：设置容器的宽度和高度，并使图片横向排列。

.scroll-container {
  position: relative;
  width: 600px;
  height: 300px;
  overflow: hidden;
}
.scroll-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 9999px;
  height: 300px;
  overflow: hidden;
  white-space: nowrap;
}
.scroll-list li {
  display: inline-block;
  width: 600px;
  height: 300px;
}

3. JS代码：给左右按钮添加点击事件，通过animate()函数实现图片的横向滚动。

$(function(){
  var $scrollList = $('.scroll-list');
  var $scrollItem = $('.scroll-list li');
  var itemWidth = $scrollItem.outerWidth(true);
  var scrollWidth = itemWidth * $scrollItem.length;
  var leftPos = $scrollList.position().left;
  var minPos = - (scrollWidth - $scrollList.parent().width());

  $('.scroll-btn-left').click(function(){
    if (leftPos < 0) {
      leftPos += itemWidth;
      $scrollList.animate({left: leftPos + 'px'}, 500);
    }
  });

  $('.scroll-btn-right').click(function(){
    if (leftPos > minPos) {
      leftPos -= itemWidth;
      $scrollList.animate({left: leftPos + 'px'}, 500);
    }
  });
});

以上代码实现了点击左右按钮图片横向滚动的效果。