javascript实现图片左右滚动效果【可自动滚动，有左右按钮】-前端开发

下面是详细讲解“javascript实现图片左右滚动效果【可自动滚动，有左右按钮】”的完整攻略：

下面是详细讲解“javascript实现图片左右滚动效果【可自动滚动，有左右按钮】”的完整攻略：

1. 确定HTML结构

首先需要确定HTML结构，一般来说，我们可以使用 ul 和 li 标签来实现一个图片轮播图。如下所示：

<div class="container">
  <ul class="img-list">
    <li><img src="image1.png"></li>
    <li><img src="image2.png"></li>
    <li><img src="image3.png"></li>
    <li><img src="image4.png"></li>
  </ul>
</div>

其中 img-list 用于包裹图片列表，容器 container 用于设置图片的宽度和高度，使图片可以在容器内部滚动。

2. 添加CSS样式

接下来，我们需要添加CSS样式，样式可以控制图片的大小、间距等。如下所示：

.container {
  width: 800px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.img-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 3200px;
}

.img-list li {
  float: left;
  width: 800px;
  height: 400px;
}

其中，容器 container 设置了宽度为800px，高度为400px，并添加了overflow: hidden;以隐藏溢出的图片。列表 img-list 设置了宽度为3200px，即4张图片的宽度之和。每张图片的宽度为800px，高度为400px。你也可以设置每张图片之间的间距，这里我们暂不介绍。

3. 编写JavaScript代码

接下来，我们来编写JavaScript代码来实现自动滚动和左右按钮的功能。

要实现自动滚动，我们可以使用 setInterval() 函数。该函数可以设置滚动间隔，以便滚动到下一张图片。如下所示：

var imgList = document.querySelector('.img-list');
var imgWidth = document.querySelector('.img-list li').offsetWidth; 
//获取每张图片的宽度
var currentIndex = 0; //设置当前索引值

setInterval(function(){
  //每隔3秒钟，滚动到下一张图片
  currentIndex++;
  if(currentIndex < 4){
    imgList.style.left = -currentIndex * imgWidth + 'px';
  }else{
    currentIndex = 0;
    imgList.style.left = 0;
  }
}, 3000); //滚动间隔为3秒钟

上面的代码设置了滚动间隔为3秒钟，每次滚动到下一张图片。当滚动到最后一张图片时，将自动滚动到第一张图片。

要实现左右按钮功能，我们可以使用两个按钮，一个向左滚动，一个向右滚动。如下所示：

//获取左右按钮
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');

prevBtn.addEventListener('click', function(){
  //向左滚动
  currentIndex--;
  if(currentIndex < 0){
    currentIndex = 3;
    imgList.style.left = -currentIndex * imgWidth + 'px';
  }else{
    imgList.style.left = -currentIndex * imgWidth + 'px';
  }
});

nextBtn.addEventListener('click', function(){
  //向右滚动
  currentIndex++;
  if(currentIndex < 4){
    imgList.style.left = -currentIndex * imgWidth + 'px';
  }else{
    currentIndex = 0;
    imgList.style.left = 0;
  }
});

该代码设置了左右两个按钮，分别为 prev 和 next 。当用户点击左按钮时，当前索引值将减去1，向左滚动一张图片。当滚动到最后一张图片时，将自动滚动到第一张图片。当用户点击右按钮时，当前索引值将加上1，向右滚动一张图片。同样，当滚动到最后一张图片时，将自动滚动到第一张图片。

4. 完整的JavaScript代码

接下来，给出完整的JavaScript代码：

var imgList = document.querySelector('.img-list');
var imgWidth = document.querySelector('.img-list li').offsetWidth; 
//获取每张图片的宽度
var currentIndex = 0; //设置当前索引值
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');

setInterval(function(){
  //每隔3秒钟，滚动到下一张图片
  currentIndex++;
  if(currentIndex < 4){
    imgList.style.left = -currentIndex * imgWidth + 'px';
  }else{
    currentIndex = 0;
    imgList.style.left = 0;
  }
}, 3000); //滚动间隔为3秒钟

prevBtn.addEventListener('click', function(){
  //向左滚动
  currentIndex--;
  if(currentIndex < 0){
    currentIndex = 3;
    imgList.style.left = -currentIndex * imgWidth + 'px';
  }else{
    imgList.style.left = -currentIndex * imgWidth + 'px';
  }
});

nextBtn.addEventListener('click', function(){
  //向右滚动
  currentIndex++;
  if(currentIndex < 4){
    imgList.style.left = -currentIndex * imgWidth + 'px';
  }else{
    currentIndex = 0;
    imgList.style.left = 0;
  }
});

5. 示例说明

接下来，给出两条示例说明：

示例一：

首先，我们需要复制上面的HTML代码和CSS代码，并放置到网页上。接下来，将上面的JavaScript代码复制到控制台中，按回车键执行即可。

示例二：

另外，我们还可以使用jQuery来实现该效果。如下所示：

var currentIndex = 0; //设置当前索引值
var imgWidth = $('.img-list li img').width();//获取每张图片的宽度
var imgNumber = $(".img-list li").length; //获取图片的数量
var imgListWidth = imgWidth * imgNumber; //计算图片列表的总宽度
$('.img-list').css('width', imgListWidth + 'px');

setInterval(function(){
  //每隔3秒钟，滚动到下一张图片
  currentIndex++;
  if(currentIndex < imgNumber){
    $('.img-list').animate({
      left: -currentIndex * imgWidth + 'px'
    }, 500);
  }else{
    currentIndex = 0;
    $('.img-list').animate({
      left: 0
    }, 500);
  }
}, 3000); //滚动间隔为3秒钟

$('.prev').click(function(){
  //向左滚动
  currentIndex--;
  if(currentIndex < 0){
    currentIndex = imgNumber - 1;
    $('.img-list').animate({
      left: -currentIndex * imgWidth + 'px'
    }, 500);
  }else{
    $('.img-list').animate({
      left: -currentIndex * imgWidth + 'px'
    }, 500);
  }
});

$('.next').click(function(){
  //向右滚动
  currentIndex++;
  if(currentIndex < imgNumber){
    $('.img-list').animate({
      left: -currentIndex * imgWidth + 'px'
    }, 500);
  }else{
    currentIndex = 0;
    $('.img-list').animate({
      left: 0
    }, 500);
  }
});

该代码使用了jQuery库来实现，该库可以使我们的JavaScript代码更加简洁。具体实现方法和上面的方法类似，唯一的区别是使用了jQuery的动画效果。