无缝轮播-仿网易云音乐页面制作

*实现目的*：通过点击左右翻页按钮，实现多个图片的滑动。

*设计思路*：将多个排列在一行的图片（小盒子）放在一个大盒子里，通过改变里面小盒子的位置来实现轮播效果，这里改变的是距离大盒子左边的距离left。需要注意的是，大盒子需要将超出范围部分设置为隐藏（overflow:hidden），那么我们就只能看见小盒子中的一部分图片。我们用1 2 3 4 5 6 7 8来表示图片，假如只有1 2 3 4这几个图片是可见的，还有四张图片不可见。然后我们需要在小盒子的左右两边分别复制后四张图片和前四章图片，那就是5 6 7 8 1 2 3 4 5 6 7 8 1 2 3 4。 这样做的目地是:当向左滑动时（假设4张图片的宽度是100px，初始位置为left=-400px，），可看见的图片是5 6 7 8，此时我们将left的值改成400px，虽然left改变了，但是用户看到的仍然是5 6 7 8四张图片，向右滑动同理，这样就可以实现这8张图片的无线轮播。

上述的图片转换时瞬间的，如果要实现图片向滑动的效果，需要用setInterval函数，每隔一定时间执行left++或left--的操作，加减的数值和执行setInterval函数的间隔绝对了图片滑动的速度。

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

let songLeftbtn =document.getElementById('song_Leftbtn');

let songRightbtn =document.getElementById('song_Rightbtn');

let roll=document.getElementById('roll');

 

roll.innerHTML=roll.innerHTML+roll.innerHTML+roll.innerHTML;

let time;

const computedStyle = window.getComputedStyle(roll);//

const leftValue = computedStyle.left;

let currentLeft;

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

  clearInterval(time); // 清除之前的定时器

  const computedStyle = window.getComputedStyle(roll);

  const leftValue = computedStyle.left;

  let currentLeft = parseFloat(leftValue);// 获取当前滚动位置

  time = setInterval(function(){

    currentLeft -= 8;

    roll.style.left = currentLeft + "px";

    if (currentLeft === -1920 || currentLeft === -1280 || currentLeft === -2560) { // 达到一页的距离

      clearInterval(time);

    }

    if( currentLeft === -2560){

     roll.style.left = "-1280px";

    }

  }, 12);

});

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

  clearInterval(time); // 清除之前的定时器

  const computedStyle = window.getComputedStyle(roll);

  const leftValue = computedStyle.left;

  let currentLeft = parseFloat(leftValue);// 获取当前滚动位置

  time = setInterval(function(){
    currentLeft += 8;

    roll.style.left = currentLeft + "px";

    if (currentLeft === 0 || currentLeft === 640|| currentLeft === -640 ||currentLeft === -1280) { // 回到初始位置

      clearInterval(time);

    }

    if(currentLeft === 0){

     roll.style.left = "-1280px";

    }

  }, 12);

});