javascript制作轮播图全过程，1.获取元素2.分模块3.分析知识点4.全部代码

1.获取元素

    // 获取img元素
   const img = document.querySelector('.slider-wrapper img')
    // 获取p文本元素
   const p = document.querySelector('.slider-footer p')
    // 获取所有li元素
   const li = document.querySelectorAll('.slider-indicator li')
    // 获取底部颜色元素
   const footer = document.querySelector('.slider-footer')
    // 获取左元素
   const prev = document.querySelector('.toggle .prev ')
    // 获取右元素
   const next = document.querySelector('.toggle .next')

2.分模块

1. 定时器轮播：图片 ，文字，底部颜色，小圆点
2. 左盒子返回上一张，右盒子返回下一张
3. 鼠标悬停 轮播暂停
4. 点击小圆点 跳转指定图片

1.定时器轮播 所需要的知识点

定时器setInterval()

setInterval() 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。

它返回一个 interval ID，该 ID 唯一地标识时间间隔，因此你可以稍后通过调用 clearInterval() 来移除定时器。

const index = setInterval(function(){
  执行函数
},1000) //是每次延迟的毫秒数（一秒等于 1000 毫秒）

停止定时器clearInterval()

clearInterval(index)

初始化的数据

 const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
    ]

• 数据存放在数组中
• 数组的每一项都是一个对象 即拿到url sliderData[0].url

遍历数组拿到所有对象

for( let i =0;i<sliderData.length;i++){
  sliderData[i]
}

通过DOM来操控元素样式

1.常见的属性

src herf  alt

2.style

语法： 对象.style.样式的属性 = '属性值'
box.style.backColor = '值'

3.className

直接添加类名会覆盖之前所有的类名

box.className='size font'

box.className+ =  ' font'

特别注意📢 ：

1.class是关键字，所以这里不能直接使用，需要使用className,来操作类的样式

2.使用className修改样式的值，会覆盖其他的类名，如果想要保留其他的样式，那么加上其他的类名，一起设置

4.classList

1. box.classList 返回值使用一个特殊的数组，数组中保存了元素的class属性的值
2. box.classList有三个方法 add(‘类名’)新增 remove(‘类名’)删除 toggle(‘类名’)切换 (有-删除，无-增加)

box.classList.add('active')
box.classList.remove('active')
box.classList.toggle('active')

1.利用定时器来进行自动图片轮播

function all(i){
    //i在7时通过if， i++ 变成8
    const obj = sliderData[i]
    //图片地址
    img.src = obj.url
    //底部文字
    p.innerHTML = obj.title
    //底部颜色
    footer.style.backgroundColor = obj.color
    //小圆点  一般是一个类名.active / .on
    //获取带有active的li标签  因为是从第0位就开始执行了 实际上只有第0位有active
    const active = document.querySelector('li.active')
    //删除所有带有active的li标签 实际上只有第0位有active  之后每次删除上一位
    active.classList.remove('active')
    //增加 active标签
     li[i].classList.add('active')
   }



    let i=0
    setInterval(function(){
     if(i>sliderData.length-1){
      i = 0
     }
     all(i)
      //  i只能在首和尾部
     i++
    },1000)

2.左盒子返回上一张，右盒子返回下一张

逻辑：鼠标点击左盒子==> 图片数据储存在数据组中==>sliderData[i] 变成 sliderData[i-1]

获取盒子元素

    // 获取左元素
   const prev = document.querySelector('.toggle .prev ')
    // 获取右元素
   const next = document.querySelector('.toggle .next')

设置点击事件

// 左盒子
  prev.addEventListener('click',function(){
    if(i<0){
      i=sliderData.length-1
    }
  all(i)
  i--
  })
  //右盒子
  next.addEventListener('click',function(){
    if(i>sliderData.length-1){
      i=0
    }
  all(i)
  i++
    })

3.鼠标悬停 轮播暂停

 //鼠标移入暂停轮播
  box.addEventListener('mouseenter',function(){
  clearInterval(index)
  })

  //鼠标移出回复轮播
  box.addEventListener('mouseleave',function(){
  getTimer()
  })

4.点击小圆点 跳转指定图片

点击小圆点 ==> 拿到索引 ==> 作用与数据组

//利用循环对所有的li设置点击对象
  for(let i = 0 ; i<sliderData.length;i++){
  li[i].addEventListener('click',function(){
   all(i)
  })}

全部代码

       // 1.1 获取 img 标签 p 标签 footer 盒子 li 左右的箭头
    // 获取img元素
   const img = document.querySelector('.slider-wrapper img')
    // 获取p文本元素
   const p = document.querySelector('.slider-footer p')
    // 获取所有li元素
   const li = document.querySelectorAll('.slider-indicator li')
    // 获取底部颜色元素
   const footer = document.querySelector('.slider-footer')
    // 获取左元素
   const prev = document.querySelector('.toggle .prev ')
    // 获取右元素
   const next = document.querySelector('.toggle .next')
    // 获取盒子
    const box =document.querySelector('div')


   function all(i){
    //i在7时通过if， i++ 变成8
    const obj = sliderData[i]
    //图片地址
    img.src = obj.url
    //底部文字
    p.innerHTML = obj.title
    //底部颜色
    footer.style.backgroundColor = obj.color
    //小圆点  一般是一个类名.active / .on
    //获取带有active的li标签  因为是从第0位就开始执行了 实际上只有第0位有active
    const active = document.querySelector('li.active')
    //删除所有带有active的li标签 实际上只有第0位有active  之后每次删除上一位
    active.classList.remove('active')
    //增加 active标签
     li[i].classList.add('active')
   }


   let i=0 ,num=0
   //利用循环对所有的li设置点击对象
  for(let i = 0 ; i<sliderData.length;i++){
  li[i].addEventListener('click',function(){
   all(i)
   num = i
  })}

    //index 要设为全局变量， 注意此时index为变量  
    // 每次暂停后重启就会index都会变化
    let index 
    function getTimer(){
      index = setInterval(function(){
     if(num>sliderData.length-1){
      num = 0
     }
     all(num)
      //  i只能在首和尾部
     num++
    },1000)
    }
   //调用函数
   getTimer()
   
  // 左盒子
  prev.addEventListener('click',function(){
    if(i<0){
      i=sliderData.length-1
    }
  all(i)
  i--
  })
  //右盒子
  next.addEventListener('click',function(){
    if(i>sliderData.length-1){
      i=0
    }
  all(i)
  i++
    })

  //鼠标移入暂停轮播
  box.addEventListener('mouseenter',function(){
  clearInterval(index)
  })

  //鼠标移出回复轮播
  box.addEventListener('mouseleave',function(){
  getTimer(num)
  })