html网页轮播图制作

以下是制作HTML网页轮播图的步骤和代码示例：

1. HTML结构

<div class="slider">
  <ul class="slider-list">
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/2.jpg" alt=""></li>
    <li><img src="img/3.jpg" alt=""></li>
    <li><img src="img/4.jpg" alt=""></li>
    <li><img src="img/5.jpg" alt=""></li>
  </ul>
  <ol class="slider-nav"></ol>
 <a href="javascript:;" class="slider-arrow slider-arrow-left">&lt;</a>
  <a href="javascript:;" class="slider-arrow slider-arrow-right">&gt;</a>
</div>

2. CSS样式

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 3000px;
  height: 400px;
}
.slider-list li {
  float: left;
  width: 600px;
  height: 400px;
}
.slider-nav {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
}
.slider-nav li {
  float: left;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.slider-nav li.active {
  background-color: #f40;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 1;
}
.slider-arrow-left {
  left: 10px;
}
.slider-arrow-right {
  right: 10px;
}

3. JavaScript代码

var slider = document.querySelector('.slider');
var sliderList = slider.querySelector('.slider-list');
var sliderNav = slider.querySelector('.slider-nav');
var sliderArrows = slider.querySelectorAll('.slider-arrow');
var focusWidth = slider.offsetWidth;
var timer = null;
var num = 0;

// 动态生成小圆圈
for (var i = 0; i < sliderList.children.length; i++) {
  var li = document.createElement('li');
  li.setAttribute('data-index', i);
  sliderNav.appendChild(li);
}

// 设置第一个小圆圈为选中状态
sliderNav.children[0].classList.add('active');

// 将第一张图片复制一份放在最后
var firstImg = sliderList.children[0].cloneNode(true);
sliderList.appendChild(firstImg);

// 点击小圆圈切换图片
sliderNav.addEventListener('click', function (e) {
  if (e.target.tagName.toLowerCase() === 'li') {
    var index = e.target.getAttribute('data-index');
    num = index;
    animate(sliderList, -index * focusWidth);
    setActiveNav(index);
  }
});

// 点击左右箭头切换图片
for (var i = 0; i < sliderArrows.length; i++) {
  sliderArrows[i].addEventListener('click', function () {
    if (this.classList.contains('slider-arrow-left')) {
      num--;
      if (num < 0) {
        sliderList.style.left = -sliderList.children.length * focusWidth + 'px';
        num = sliderList.children.length - 2;
      }
      animate(sliderList, -num * focusWidth);
      setActiveNav(num);
    } else if (this.classList.contains('slider-arrow-right')) {
      num++;
      if (num > sliderList.children.length - 1) {
        sliderList.style.left = 0;
        num = 1;
      }
      animate(sliderList, -num * focusWidth);
      setActiveNav(num);
    }
  });
}

// 自动轮播
timer = setInterval(function () {
  sliderArrows[1].click();
}, 2000);

// 鼠标移入停止轮播，移出继续轮播
slider.addEventListener('mouseenter', function () {
  clearInterval(timer);
});
slider.addEventListener('mouseleave', function () {
  timer = setInterval(function () {
    sliderArrows[1].click();
  }, 2000);
});

// 设置小圆圈选中状态
function setActiveNav(index) {
  for (var i = 0; i < sliderNav.children.length; i++) {
    sliderNav.children[i].classList.remove('active');
  }
  sliderNav.children[index % sliderNav.children.length].classList.add('active');
}