image_switch.js 1.1 KB

123456789101112131415161718192021222324252627282930313233
  1. let controls = document.querySelectorAll('.exhibition');
  2. for(let control of controls){
  3. let part = control.querySelectorAll('.cards'),
  4. partLength = part.length;
  5. console.log("partLength",partLength);
  6. let partArray = [].slice.call(part);
  7. let indexicon = control.querySelectorAll('.index div');
  8. let currentIndex = 0;
  9. let nextbutton = control.querySelector(".next");
  10. control.addEventListener("click",function(e){
  11. let target = e.target;
  12. if(target.classList.contains("next")){
  13. let next = e.target,
  14. currentPart = partArray[currentIndex],
  15. nextPart = partArray[(currentIndex+1)%partLength],
  16. currentIndexIcon = indexicon[currentIndex],
  17. nextIndexIcon = indexicon[(currentIndex+1)%partLength];
  18. currentPart.classList.add("disappear");
  19. nextPart.classList.remove("disappear");
  20. currentIndexIcon.classList.remove("index_on");
  21. nextIndexIcon.classList.add("index_on");
  22. currentIndex = (currentIndex+1)%partLength;
  23. console.log("next",currentIndex);
  24. }
  25. });
  26. }