javascript单张多张图无缝滚动实例代码

下面是详细的讲解：

简介

JavaScript无缝滚动是一种常见的网页效果之一。实现无缝滚动需要用到一些JavaScript知识，结合HTML和CSS来完成。这里我们将讲解如何实现一个单张或多张图片的无缝滚动效果。

实现步骤

1. HTML结构

首先，我们需要在HTML中添加一个容器，并在容器内添加需要滚动的图片。

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

2. CSS样式

接下来，我们需要为容器和图片添加样式，样式的主要作用是设置容器和图片的宽度、高度、浮动、定位等属性。
例如，设置容器的宽度为800px，高度为400px，图片的宽度为400px，高度为400px，并设置图片的浮动方向为左侧。

.slider-container{
  width: 800px;
  height: 400px;
  overflow: hidden;
  /*隐藏超出容器的内容*/
  position: relative;
  /*相对定位*/
}

.slider-list{
  position: absolute;
  /*绝对定位*/
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  width: 2400px;
  /* 三张图片，每张图片的宽度为 800px，因此总宽度为 2400px */
}

.slider-list li{
  float: left;
  display: inline;
  width: 800px;
  height: 400px;
  margin-right: -3px;
  /*为了消除图片之间的间隙，需要将margin-right设置为负值*/
}

.slider-list li img{
  width: 100%;
  height: 100%;
}

3. JavaScript实现

实现无缝滚动的关键就是使用JavaScript来动态地调整容器中的图片位置。

在实现过程中，我们需要通过setInterval函数来实现图片的自动滚动，通过计算图片的偏移量来完成无缝滚动的效果。下面是示例代码：

window.onload=function(){
  var container=document.querySelector('.slider-container');
  var list=document.querySelector('.slider-list');
  var lis=list.querySelectorAll('li');
  var width=lis[0].offsetWidth;//每张图片的宽度
  var len=lis.length;//图片数量
  var timer=null;
  list.innerHTML+=list.innerHTML;//复制一份图片列表
  list.style.width=len*width*2+'px';//总宽度为两倍图片列表宽度

  function move(){
    if(container.scrollLeft>list.offsetWidth/2){//判断图片是否滚动到一半
      container.scrollLeft-=list.offsetWidth/2;//回到真正的起点
    }else{
      container.scrollLeft++;//往右滚动
    }
  }
  timer=setInterval(move,10);//每10毫秒滚动一次

  //鼠标进入容器停止滚动，鼠标离开容器恢复滚动
  container.onmouseover=function(){
    clearInterval(timer);
  }
  container.onmouseout=function(){
    timer=setInterval(move,10);
  }
}

以上代码实现了一张图片的无缝滚动。如果需要实现多张图片的无缝滚动，只需要将容器和图片的宽度、图片数量等值修改即可。

下面是另外一种示例代码，实现了多张图片的无缝滚动。代码说明详见注释：

window.onload=function(){
  var container=document.querySelector('.slider-container');
  var list=document.querySelector('.slider-list');
  var lis=list.querySelectorAll('li');
  var width=lis[0].offsetWidth;//每张图片的宽度取第一张图片的宽度
  var len=lis.length;//图片数量
  var timer=null;
  list.innerHTML+=list.innerHTML;//复制一份图片列表
  list.style.width=len*width*2+'px';//总宽度为两倍图片列表宽度

  var num=1;//显示图片的数量
  var time=3000;//时间间隔为3秒
  var play=null;//定时器

  function move(){
    if(container.scrollLeft%width==0){//已经完全滚动到一张图片
      clearInterval(play);//先清除定时器
      play=setTimeout(function(){scrollimg();},time);//2秒后重新开始滚动
    }else{
      container.scrollLeft++;
      if(container.scrollLeft>=list.offsetWidth/2){//滚动到最后一张时，立即回到真正的起点
        container.scrollLeft=0;
      }
    }
  }

  function scrollimg(){
    play=setInterval(move,10);//每10毫秒滚动一次
  }

  scrollimg();//页面加载完成时，执行滚动函数

  //鼠标进入容器停止滚动，鼠标离开容器恢复滚动
  container.onmouseover=function(){
    clearInterval(timer);
  }
  container.onmouseout=function(){
    timer=setInterval(move,10);
  }
}

结语

以上就是JavaScript实现单张和多张图片的无缝滚动效果的完整攻略。希望对您有所帮助！