JS实战轮播图详细代码

• 首先获取轮播图相关的DOM元素，包括轮播列表、轮播项、导航、导航项、前后按钮等。
• 初始化函数init()设置轮播图的宽度、每个轮播项的宽度，并绑定导航、前后按钮的点击事件。
• 处理导航、前后按钮的点击事件，切换到指定索引的轮播项，并更新导航状态。
• 开始自动播放函数startAutoPlay()，使用setInterval定时器实现自动播放，每隔3秒切换到下一张轮播项。
• 停止自动播放函数stopAutoPlay()，使用clearInterval清除定时器实现停止自动播放。
• 最后调用init()函数初始化轮播图。

这个例子实现了一个简单的轮播图，通过CSS设置轮播图的样式、布局，通过JS实现轮播图的切换、导航等功能。可以根据实际需求进行修改和扩展。

HTML代码：

<div class="slider">
  <ul class="slider-list">
    <li class="slider-item"><img src="img/1.jpg"></li>
    <li class="slider-item"><img src="img/2.jpg"></li>
    <li class="slider-item"><img src="img/3.jpg"></li>
  </ul>
  <div class="slider-nav">
    <span class="slider-nav-item active"></span>
    <span class="slider-nav-item"></span>
    <span class="slider-nav-item"></span>
  </div>
  <a href="#" class="slider-prev"><</a>
  <a href="#" class="slider-next">></a>
</div>

CSS代码：

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 1800px;
  height: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.slider-item {
  float: left;
  width: 600px;
  height: 400px;
}
.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.slider-nav-item {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 8px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}
.slider-nav-item.active {
  background-color: #f00;
}
.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  background-color: rgba(0, 0, 0, .5);
  cursor: pointer;
}
.slider-prev {
  left: 20px;
}
.slider-next {
  right: 20px;
}

JS代码：

var slider = document.querySelector('.slider');
var sliderList = slider.querySelector('.slider-list');
var sliderItems = slider.querySelectorAll('.slider-item');
var sliderNav = slider.querySelector('.slider-nav');
var sliderNavItems = slider.querySelectorAll('.slider-nav-item');
var sliderPrev = slider.querySelector('.slider-prev');
var sliderNext = slider.querySelector('.slider-next');

var currentIndex = 0;
var timer = null;

// 初始化
function init() {
  // 设置轮播图宽度
  sliderList.style.width = sliderItems.length * 100 + '%';
  // 设置每个轮播项宽度
  for (var i = 0; i < sliderItems.length; i++) {
    sliderItems[i].style.width = 100 / sliderItems.length + '%';
  }
  // 绑定事件
  sliderNav.addEventListener('click', handleNavClick);
  sliderPrev.addEventListener('click', handlePrevClick);
  sliderNext.addEventListener('click', handleNextClick);
  // 自动播放
  startAutoPlay();
}

// 处理导航点击事件
function handleNavClick(event) {
  if (event.target.classList.contains('slider-nav-item')) {
    var index = Array.prototype.indexOf.call(sliderNavItems, event.target);
    goToSlide(index);
  }
}

// 处理上一张点击事件
function handlePrevClick(event) {
  goToSlide(currentIndex - 1);
}

// 处理下一张点击事件
function handleNextClick(event) {
  goToSlide(currentIndex + 1);
}

// 切换到指定索引的轮播项
function goToSlide(index) {
  if (index < 0) {
    index = sliderItems.length - 1;
  } else if (index >= sliderItems.length) {
    index = 0;
  }
  currentIndex = index;
  sliderList.style.transform = 'translateX(-' + currentIndex * 100 / sliderItems.length + '%)';
  updateNav();
}

// 更新导航状态
function updateNav() {
  for (var i = 0; i < sliderNavItems.length; i++) {
    if (i === currentIndex) {
      sliderNavItems[i].classList.add('active');
    } else {
      sliderNavItems[i].classList.remove('active');
    }
  }
}

// 开始自动播放
function startAutoPlay() {
  timer = setInterval(function() {
    goToSlide(currentIndex + 1);
  }, 3000);
}

// 停止自动播放
function stopAutoPlay() {
  clearInterval(timer);
}

// 初始化轮播图
init();