JS 定时轮播图

需求：每一秒切换一个图片

思路：

1.设置数组，里面包含素材等信息

2.获取元素

3.设置定时器函数

      设置一个变量自增

       更改信息

4.if设置图片循环

初始信息

 const sliderData = [
      { url: '地址', title: '', color: '图片边框rgb' },

开定时器

// 1. 获取元素 
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
let i = 0  // 控制图片的张数
// 2. 开启定时器
console.log(sliderData[i])
setInterval(function(){
  i++
  console.log(sliderData[i])
}, 1000)

修改内容 

// 1. 获取元素 
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
let i = 0  // 控制图片的张数
// 2. 开启定时器
// console.log(sliderData[i])
setInterval(function(){
  i++
    
  //=========================todo 02 
  // 更换图片路径
  img.src = sliderData[i].url
  // 修改p标签的内容
  p.innerHTML = sliderData[i].title
  
  // 小圆点
  const li_old = document.querySelector('.slider-indicator .active')
  // 先删除以前的active
  li_old.classList.remove('active')

  const li_now = document.querySelector(`.slider-indicator li:nth-child(${i + 1})`)
  // 只让当前li添加active
  li_now.classList.add('active')
  //=================================== 
}, 1000)

 无缝衔接

setInterval(function () {
  i++
  //=========================
  // 无缝衔接位置  一共八张图片，到了最后一张就是 8， 数组的长度就是 8
  if (i >= sliderData.length) {
    i = 0
  } 
  console.log(i)