轮播图制作-仿网易云音乐

 

*目标*：

1.实现自动播放。

2.实现左右翻页。

3.实现小圆点的变化：每张图片下面对应一个小圆点，播放到哪张图片，该图片对应的小圆点就变成红色。

4.通过点击下面的小圆点，实现播放对应的图片。

*思路*：

1.首先将需要轮播的图片放在数组里，通过设置变量currentIndex，来记录当前播放的是第几张图片。

2.实现小圆点更新：通过获取当前currentIndex。通过for循环遍历每一个小圆点，如果小圆点的位置等于currentIndex，那么就修改小圆点的颜色为红色，否则为灰色。

3.实现自动播放：通过currentIndex++来实现遍历每一张图片，当currentIndex等于图片数量时，要将currentIndex设置成0，重新进入遍历。这里我们可以通过setInterval函数来实现不断调用函数，来实现对currentIndex的遍历。

4.实现左右翻页：对点击按钮添加事件监听器，当点击翻页按钮时，通过对currentIndex加一减一操作实现图片的左右翻页效果，需要注意的是当currentIndex等于图片数量时，要执行currentIndex等于0操作，当currentIndex等于0时，要执行currentIndex等于图片数量减一的操作，以此实现图片的循环播放。

5.点击小圆点实现图片切换：通过for循环监听每一个小圆点，当监听到对应的小圆点被点击时，更新图片以及小圆点颜色。

6.为了避免左右点击事件和自动轮播造成事件上的冲突，还需要一个停止自动播放和一个继续自动播放的函数。

*具体代码实现（js）：*

/*小圆点 */

let updateDotStyles=(index) =>{

 let dots = sliderDot.getElementsByTagName('a');

 for (var i = 0; i < dots.length; i++) {

  dots[i].style.backgroundImage = i === index ? "url('../images/red.png')" : "url('../images/grey.png')";

 }

}

// 停止自动播放的函数

function stopAutoPlay() {

 clearInterval(timerId);

}

 

// 继续自动播放的函数

function startAutoPlay() {

 timerId = setInterval(auto_select, 5000);

}

let select=(index)=>{

 stopAutoPlay();

 index=Number(index);

 if(index>links.length){

  return;

 }

 if(currentIndex==index){

  return;

 }

 currentIndex=index;

 sliderPicture.setAttribute('src',links[currentIndex].url)

 sliderBG.style.backgroundImage = 'url(' + links_BG[currentIndex].url + ')'

 updateDotStyles(currentIndex);

 startAutoPlay();

}

let bind= () =>{

 //左翻页事件监听

 sliderLeftbtn.addEventListener('click',()=>{

  let index=currentIndex-1;

  if(index<0){

   index=links.length-1;

  }

  select(index);

  updateDotStyles(index);

 })

 //右翻页事件监听

 sliderRightbtn.addEventListener('click',()=>{

  let index=currentIndex+1;

  if(index>=links.length){

   index=0;

  }

  select(index);

  updateDotStyles(index);

 })

 //点击小圆点

 let dots = sliderDot.getElementsByTagName('a');

 for (let i = 0; i < dots.length; i++) {

  dots[i].addEventListener('click', () => {

   select(i);

   updateDotStyles(i);

  });

 }

}

/*自动播放*/

let auto_select= () =>{

 let index=currentIndex;

 if(index>=links.length){

  index=0;

 }

 sliderBG.style.backgroundImage = 'url(' + links_BG[index].url + ')';

 sliderPicture.setAttribute('src',links[index].url);

 updateDotStyles(index);

 index++;

 currentIndex=index;

 console.log(index);

}

let timerId;

document.addEventListener('DOMContentLoaded', () => {

 updateDotStyles(currentIndex);

 timerId = setInterval(auto_select, 5000);

 bind();

});