html+css+javascript实现列表循环滚动示例代码

我来详细讲解“HTML+CSS+JavaScript实现列表循环滚动示例代码”的完整攻略。

1. 准备HTML和CSS，先创建一个容器，设置宽高，并将其position设置为relative，然后在容器中创建一个ul列表，设置宽度为li的宽度乘以li的个数，然后将li的宽度和高度设置成容器的宽高，设置float: left 使其一行排列。此时，因为ul的宽度大于容器的宽度，所以在容器的外部设置一个包裹ul的div，将其overflow设置成hidden，使其只显示容器内的内容，而列表的部分将被隐藏起来。

2. 追加两个li项，这两个li项分别为最后一个li项的样本克隆得到的副本和第一个li项的样本克隆得到的副本，并将它们分别放置在原来的li列表的前后。此操作实现的效果就是：展示出来的列表项再次循环，没有了断裂的现象，且接下来的JS代码可以实现这个列表项延时滑动的效果。

3. 编写JavaScript代码，目标是实现无限循环滚动的效果。首先，获取列表容器（ul）和列表项宽度（liWidth），然后在轮播滚动过程中，只需每次将ul的left值向左移动liWidth的长度，再将该值赋给ul的left属性即可。但是当ul的left达到最后一个复制元素的位置时，就会存在空白，我们就需要进行一个判断来让该空白补齐，即判断ul的left是否小于等于-listWidth，若条件成立，则需要将left值重置为0以补齐空白。这样就可以实现列表项的循环滚动了。

下面是示例代码（代码中的“//”为代码的注释）：

HTML部分：

<div id="box">
  <div id="wrap">
    <ul id="list">
      <li><img src="image0.jpg"></li>
      <li><img src="image1.jpg"></li>
      <li><img src="image2.jpg"></li>
      <li><img src="image3.jpg"></li>
      <li><img src="image4.jpg"></li>
      <!-- 克隆第一个和最后一个元素 -->
      <li><img src="image0.jpg"></li>
      <li><img src="image1.jpg"></li>
    </ul>
  </div>
</div>

CSS部分：

#box {
  width: 500px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

#wrap {
  position: absolute;
  left: 0;
  top: 0;
}

#list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 3000px; /* (liWidth * liNum) */
}


#list li {
  width: 500px;
  height: 200px;
  float: left;
}

JavaScript部分：

// 获取需要的元素
var box = document.getElementById('box');
var wrap = document.getElementById('wrap');
var list = document.getElementById('list');
var liWidth = list.getElementsByTagName('li')[0].offsetWidth; // 获取每一个 li 的宽度
var liNum = list.getElementsByTagName('li').length; // 获取 li 的个数
var pic = 0; // 初始化轮播的初始值
var flag = true; // 防止短时间内重复点击按钮

// 设置定时器，轮播滚动图片
function autoScroll() {
  var time = setInterval(function(){
    if (pic === liNum - 1) {
      pic = 1;
      list.style.left = 0;
    } else {
      pic++;
    }
    animate(list, -pic * liWidth);
  }, 3000);
}

// 动画效果
function animate(ele, target) {
  clearInterval(ele.timer);
  ele.timer = setInterval(function(){
    var step = (target - ele.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (ele.offsetLeft !== target) {
      ele.style.left = ele.offsetLeft + step + 'px';
    } else {
      clearInterval(ele.timer);
    }
  }, 15);
}

// 启动自动轮播
autoScroll();

示例说明：

（1）在HTML部分，我们使用了一个div来承载整个列表滚动的容器，为其设置了宽、高，并将其overflow设置成了hidden，以控制显示区域内的大小。子层级容器（#wrap）的宽度为容器宽度，而#list则为所有列表项的UL容器，利用它的宽度扩大了滚动范围。每个#list li则为单个li的宽度为容器宽度，其高度和宽度与容器相等，这样就可以展示完整的图片。

（2）在CSS部分，我们设置了每个li和UL容器的样式，其中UL的宽度为列表项宽度被列表项个数所乘，用于扩大滑动滚动的范围。

（3）在JavaScript部分，我们将需要操作的元素获取后使用animate函数不断循环更新列表的位置以达到滚动的效果。autoScroll函数实现自动滚动的效果，pic和flag两个变量则是为了避免用户频繁点击切换按钮而导致列表位置显示错误。