image_switch.js 1.1 KB

12345678910111213141516171819202122232425262728293031
  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. control.addEventListener("click",function(e){
  10. let target = e.target;
  11. if(target.classList.contains("next")){
  12. let currentPart = partArray[currentIndex],
  13. nextPart = partArray[(currentIndex+1)%partLength],
  14. currentIndexIcon = indexicon[currentIndex],
  15. nextIndexIcon = indexicon[(currentIndex+1)%partLength];
  16. currentPart.classList.add("disappear");
  17. nextPart.classList.remove("disappear");
  18. currentIndexIcon.classList.remove("index_on");
  19. nextIndexIcon.classList.add("index_on");
  20. currentIndex = (currentIndex+1)%partLength;
  21. console.log("next",currentIndex);
  22. }
  23. });
  24. }