前端web—每日一练（7.2）--商品列表轮播

需求分析：

点击左右箭头，商品列表整体切换，换成下一个列表

实现代码

transform控制商量子列表方法实现

代码比较繁琐，可以简单实现功能

HTMl主要结构

JS代码

const left = document.getElementById("like_left");
const list1 = document.getElementById("list1");
const right = document.getElementById("like_right");
const list2 = document.getElementById("list2");
const list3 = document.getElementById("list3");
var translateX = 0;
left.addEventListener("click", function () {
  // console.log("第三次");
  translateX = translateX + 960;
  if (translateX > 0) {
    translateX = -1920;
  }
  console.log(translateX + "左键");
  list1.style.transform = `translateX(${translateX}px)`;
  list1.style.transition = "all 1s";
  list2.style.transform = `translateX(${translateX}px)`;
  list2.style.transition = "all 1s";
  list3.style.transform = `translateX(${translateX}px)`;
  list3.style.transition = "all 1s";
});
right.addEventListener("click", function () {
  if (translateX <= -1920) {
    translateX = 960;
  }
  translateX = translateX - 960;
  list1.style.transform = `translateX(${translateX}px)`;
  list1.style.transition = "all 1s";
  list2.style.transform = `translateX(${translateX}px)`;
  list2.style.transition = "all 1s";
  list3.style.transform = `translateX(${translateX}px)`;
  list3.style.transition = "all 1s";
  console.log(translateX + "右键");
});

left位置控制父元素盒子方法实现

HTML主要代码

CSS主要代码

JS代码

相较于上面，代码量减少

list1.style.left = "0px";

var nowleft = 0;
left.addEventListener("click", function () {
  if (nowleft == 0) {
    nowleft = -2880;
  }
  nowleft = nowleft + 960;
  list1.style.left = nowleft + "px";
  list1.style.transition = "all 1s";
  console.log(nowleft);
});
right.addEventListener("click", function () {
  if (nowleft <= -1920) {
    nowleft = 960;
  }
  nowleft = nowleft - 960;
  list1.style.left = nowleft + "px";
  list1.style.transition = "all 1s";
  console.log("右击", nowleft);
});

总结

只是实现简单的点击切换效果，由于动画时间，没有做到无缝切换。