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.常见的属性