html 只有第一个轮播的工作出一个多个在同一页

mm9b1k5b  于 2024-01-04  发布在  其他
关注(0)|答案(1)|浏览(220)

我尝试添加for循环来遍历每个carousel，但是当我这样做的时候，现在它们都不工作了。在我添加for循环之前，只有第一个工作。
最初是：

  1. querySelector('.carousel')

字符串
然后我把它改成：

  1. querySelectorAll('.carousel')

型

  1. var carousel = document.querySelectorAll('.carousel'), i;
  3. for (i = 0; i < carousel.length; ++i) {
  5. firstImg = carousel[i].querySelectorAll("img")[0];
  6. arrowIcons = document.querySelectorAll(".wrapper i");
  8. let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
  12. carousel[i].addEventListener("mousedown", dragStart);
  13. carousel[i].addEventListener("touchstart", dragStart);
  15. document.addEventListener("mousemove", dragging);
  16. carousel[i].addEventListener("touchmove", dragging);
  18. document.addEventListener("mouseup", dragStop);
  19. carousel[i].addEventListener("touchend", dragStop);
  20. }
  22. const showHideIcons = () => {
  23.     // showing and hiding prev/next icon according to carousel scroll left value
  24.     let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
  25.     arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
  26.     arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
  27. }
  29. arrowIcons.forEach(icon => {
  30.     icon.addEventListener("click", () => {
  31.         let firstImgWidth = firstImg.clientWidth + 14; // getting first img width & adding 14 margin value
  32.         // if clicked icon is left, reduce width value from the carousel scroll left else add to it
  33.         carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
  34.         setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
  35.     });
  36. });
  38. const autoSlide = () => {
  39.     // if there is no image left to scroll then return from here
  40.     if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
  42.     positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
  43.     let firstImgWidth = firstImg.clientWidth + 14;
  44.     // getting difference value that needs to add or reduce from carousel left to take middle img center
  45.     let valDifference = firstImgWidth - positionDiff;
  47.     if(carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
  48.         return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
  49.     }
  50.     // if user is scrolling to the left
  51.     carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
  52. }
  54. const dragStart = (e) => {
  55.     // updatating global variables value on mouse down event
  56.     isDragStart = true;
  57.     prevPageX = e.pageX || e.touches[0].pageX;
  58.     prevScrollLeft = carousel.scrollLeft;
  59. }
  61. const dragging = (e) => {
  62.     // scrolling images/carousel to left according to mouse pointer
  63.     if(!isDragStart) return;
  64.     e.preventDefault();
  65.     isDragging = true;
  66.     carousel.classList.add("dragging");
  67.     positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
  68.     carousel.scrollLeft = prevScrollLeft - positionDiff;
  69.     showHideIcons();
  70. }
  72. const dragStop = () => {
  73.     isDragStart = false;
  74.     carousel.classList.remove("dragging");
  76.     if(!isDragging) return;
  77.     isDragging = false;
  78.     autoSlide();
  79. }
  1. /* Import Google font - Poppins */
  2. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
  3. *{
  4.   margin: 0;
  5.   padding: 0;
  6.   box-sizing: border-box;
  7.   font-family: 'Poppins', sans-serif;
  8. }
  9. body{
  10.   //display: flex;
  11.   padding: 0 35px;
  12.   min-height: 100vh;
  13.   align-items: center;
  14.   justify-content: center;
  15.   background: #343F4F;
  16. }
  17. .wrapper{
  18.   display: flex;
  19.   max-width: 1200px;
  20.   position: relative;
  21. }
  22. .wrapper i{
  23.   top: 50%;
  24.   height: 44px;
  25.   width: 44px;
  26.   color: #343F4F;
  27.   cursor: pointer;
  28.   font-size: 1.15rem;
  29.   position: absolute;
  30.   text-align: center;
  31.   line-height: 44px;
  32.   background: #fff;
  33.   border-radius: 50%;
  34.   transform: translateY(-50%);
  35.   transition: transform 0.1s linear;
  36. }
  37. .wrapper i:active{
  38.   transform: translateY(-50%) scale(0.9);
  39. }
  40. .wrapper i:hover{
  41.   background: #f2f2f2;
  42. }
  43. .wrapper i:first-child{
  44.   left: -22px;
  45.   display: none;
  46. }
  47. .wrapper i:last-child{
  48.   right: -22px;
  49. }
  50. .wrapper .carousel{
  51.   font-size: 0px;
  52.   cursor: pointer;
  53.   overflow: hidden;
  54.   white-space: nowrap;
  55.   scroll-behavior: smooth;
  56. }
  57. .carousel.dragging{
  58.   cursor: grab;
  59.   scroll-behavior: auto;
  60. }
  61. .carousel.dragging img{
  62.   pointer-events: none;
  63. }
  64. .carousel img{
  65.   height: 340px;
  66.   object-fit: cover;
  67.   user-select: none;
  68.   margin-left: 14px;
  69.   width: calc(100% / 3);
  70. }
  71. .carousel img:first-child{
  72.   margin-left: 0px;
  73. }
  75. @media screen and (max-width: 900px) {
  76.   .carousel img{
  77.     width: calc(100% / 2);
  78.   }
  79. }
  81. @media screen and (max-width: 550px) {
  82.   .carousel img{
  83.     width: 100%;
  84.   }
  85. }
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Draggable Image Slider | CodingNepal</title>
  6.     <link rel="stylesheet" href="style.css">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  9.   </head>
  10.   <body>
  11.   <div>
  12.   
  13.     <div class="wrapper">
  14.       <i id="left" class="fa-solid fa-angle-left"></i>
  15.       <div class="carousel">
  16.         <img src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg" alt="img" draggable="false">
  17.         <img src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg" alt="img" draggable="false">
  18.         <img src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back01.jpg" alt="img" draggable="false">
  19.         <img src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" alt="img" draggable="false">
  20.         <img src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back07.jpg" alt="img" draggable="false">
  21.         
  22.         
  23.       </div>
  24.       <i id="right" class="fa-solid fa-angle-right"></i>
  25.     </div>
  26.     
  27.     </div>
  28.     
  29.     <p>
  30.     hihifdd
  31.     </p>
  32.     <div class="wrapper">
  33.       <i id="left" class="fa-solid fa-angle-left"></i>
  34.       <div class="carousel">
  35.         <img src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg" alt="img" draggable="false">
  36.         <img src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg" alt="img" draggable="false">
  37.         <img src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back01.jpg" alt="img" draggable="false">
  38.         <img src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" alt="img" draggable="false">
  39.         <img src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back07.jpg" alt="img" draggable="false">
  40.         
  41.       </div>
  42.       <i id="right" class="fa-solid fa-angle-right"></i>
  43.     </div>
  44.     
  45.   </body>
  46. </html>
Html

1条答案

按热度按时间
eanckbw9

eanckbw91#

您需要将其余函数带入for循环，并调整代码，以便函数引用当前循环中的carousel元素的属性：

  1. var carousel = document.querySelectorAll(".carousel"),
  2.   i;
  4. for (i = 0; i < carousel.length; ++i) {
  5.   const thisCourusel = carousel[i];
  6.   const firstImg = thisCourusel.querySelectorAll("img")[0];
  7.   const arrowIcons = thisCourusel.closest(".wrapper").querySelectorAll("i");
  9.   let isDragStart = false,
  10.     isDragging = false,
  11.     prevPageX,
  12.     prevScrollLeft,
  13.     positionDiff;
  15.   const dragStart = (e) => {
  16.     // updatating global variables value on mouse down event
  17.     isDragStart = true;
  18.     prevPageX = e.pageX || e.touches[0].pageX;
  19.     prevScrollLeft = thisCourusel.scrollLeft;
  20.   };
  22.   const dragging = (e) => {
  23.     // scrolling images/carousel to left according to mouse pointer
  24.     if (!isDragStart) return;
  25.     e.preventDefault();
  26.     isDragging = true;
  27.     thisCourusel.classList.add("dragging");
  28.     positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
  29.     thisCourusel.scrollLeft = prevScrollLeft - positionDiff;
  30.     showHideIcons();
  31.   };
  33.   const dragStop = () => {
  34.     isDragStart = false;
  35.     thisCourusel.classList.remove("dragging");
  37.     if (!isDragging) return;
  38.     isDragging = false;
  39.     autoSlide();
  40.   };
  42.   thisCourusel.addEventListener("mousedown", dragStart);
  43.   thisCourusel.addEventListener("touchstart", dragStart);
  45.   document.addEventListener("mousemove", dragging);
  46.   thisCourusel.addEventListener("touchmove", dragging);
  48.   document.addEventListener("mouseup", dragStop);
  49.   thisCourusel.addEventListener("touchend", dragStop);
  51.   const showHideIcons = () => {
  52.     // showing and hiding prev/next icon according to carousel scroll left value
  53.     let scrollWidth = thisCourusel.scrollWidth - thisCourusel.clientWidth; // getting max scrollable width
  54.     arrowIcons[0].style.display =
  55.       thisCourusel.scrollLeft == 0 ? "none" : "block";
  56.     arrowIcons[1].style.display =
  57.       thisCourusel.scrollLeft == scrollWidth ? "none" : "block";
  58.   };
  60.   arrowIcons.forEach((icon) => {
  61.     icon.addEventListener("click", () => {
  62.       let firstImgWidth = firstImg.clientWidth + 14; // getting first img width & adding 14 margin value
  63.       // if clicked icon is left, reduce width value from the carousel scroll left else add to it
  64.       thisCourusel.scrollLeft +=
  65.         icon.id == "left" ? -firstImgWidth : firstImgWidth;
  66.       setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
  67.     });
  68.   });
  70.   const autoSlide = () => {
  71.     // if there is no image left to scroll then return from here
  72.     if (
  73.       thisCourusel.scrollLeft -
  74.         (thisCourusel.scrollWidth - thisCourusel.clientWidth) >
  75.         -1 ||
  76.       thisCourusel.scrollLeft <= 0
  77.     )
  78.       return;
  80.     positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
  81.     let firstImgWidth = firstImg.clientWidth + 14;
  82.     // getting difference value that needs to add or reduce from carousel left to take middle img center
  83.     let valDifference = firstImgWidth - positionDiff;
  85.     if (carousel.scrollLeft > prevScrollLeft) {
  86.       // if user is scrolling to the right
  87.       return (thisCourusel.scrollLeft +=
  88.         positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff);
  89.     }
  90.     // if user is scrolling to the left
  91.     thisCourusel.scrollLeft -=
  92.       positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
  93.   };
  94. }
  1. /* Import Google font - Poppins */
  2. @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
  3. * {
  4.   margin: 0;
  5.   padding: 0;
  6.   box-sizing: border-box;
  7.   font-family: "Poppins", sans-serif;
  8. }
  9. body {
  10.   //display: flex;
  11.   padding: 0 35px;
  12.   min-height: 100vh;
  13.   align-items: center;
  14.   justify-content: center;
  15.   background: #343f4f;
  16. }
  17. .wrapper {
  18.   display: flex;
  19.   max-width: 1200px;
  20.   position: relative;
  21. }
  22. .wrapper i {
  23.   top: 50%;
  24.   height: 44px;
  25.   width: 44px;
  26.   color: #343f4f;
  27.   cursor: pointer;
  28.   font-size: 1.15rem;
  29.   position: absolute;
  30.   text-align: center;
  31.   line-height: 44px;
  32.   background: #fff;
  33.   border-radius: 50%;
  34.   transform: translateY(-50%);
  35.   transition: transform 0.1s linear;
  36. }
  37. .wrapper i:active {
  38.   transform: translateY(-50%) scale(0.9);
  39. }
  40. .wrapper i:hover {
  41.   background: #f2f2f2;
  42. }
  43. .wrapper i:first-child {
  44.   left: -22px;
  45.   display: none;
  46. }
  47. .wrapper i:last-child {
  48.   right: -22px;
  49. }
  50. .wrapper .carousel {
  51.   font-size: 0px;
  52.   cursor: pointer;
  53.   overflow: hidden;
  54.   white-space: nowrap;
  55.   scroll-behavior: smooth;
  56. }
  57. .carousel.dragging {
  58.   cursor: grab;
  59.   scroll-behavior: auto;
  60. }
  61. .carousel.dragging img {
  62.   pointer-events: none;
  63. }
  64. .carousel img {
  65.   height: 340px;
  66.   object-fit: cover;
  67.   user-select: none;
  68.   margin-left: 14px;
  69.   width: calc(100% / 3);
  70. }
  71. .carousel img:first-child {
  72.   margin-left: 0px;
  73. }
  75. @media screen and (max-width: 900px) {
  76.   .carousel img {
  77.     width: calc(100% / 2);
  78.   }
  79. }
  81. @media screen and (max-width: 550px) {
  82.   .carousel img {
  83.     width: 100%;
  84.   }
  85. }
  1. <!doctype html>
  2. <html lang="en" dir="ltr">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Draggable Image Slider | CodingNepal</title>
  6.     <link rel="stylesheet" href="style.css" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <link
  9.       rel="stylesheet"
  10.       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
  11.     />
  12.   </head>
  13.   <body>
  14.     <div>
  15.       <div class="wrapper">
  16.         <i id="left" class="fa-solid fa-angle-left"></i>
  17.         <div class="carousel">
  18.           <img
  19.             src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg"
  20.             alt="img"
  21.             draggable="false"
  22.           />
  23.           <img
  24.             src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg"
  25.             alt="img"
  26.             draggable="false"
  27.           />
  28.           <img
  29.             src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back01.jpg"
  30.             alt="img"
  31.             draggable="false"
  32.           />
  33.           <img
  34.             src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg"
  35.             alt="img"
  36.             draggable="false"
  37.           />
  38.           <img
  39.             src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back07.jpg"
  40.             alt="img"
  41.             draggable="false"
  42.           />
  43.         </div>
  44.         <i id="right" class="fa-solid fa-angle-right"></i>
  45.       </div>
  46.     </div>
  48.     <p>hihifdd</p>
  49.     <div class="wrapper">
  50.       <i id="left" class="fa-solid fa-angle-left"></i>
  51.       <div class="carousel">
  52.         <img
  53.           src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg"
  54.           alt="img"
  55.           draggable="false"
  56.         />
  57.         <img
  58.           src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg"
  59.           alt="img"
  60.           draggable="false"
  61.         />
  62.         <img
  63.           src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back01.jpg"
  64.           alt="img"
  65.           draggable="false"
  66.         />
  67.         <img
  68.           src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg"
  69.           alt="img"
  70.           draggable="false"
  71.         />
  72.         <img
  73.           src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back07.jpg"
  74.           alt="img"
  75.           draggable="false"
  76.         />
  77.       </div>
  78.       <i id="right" class="fa-solid fa-angle-right"></i>
  79.     </div>
  80.   </body>
  81. </html>

您可能需要使用forEach()循环来使代码更清晰，例如：

  1. document.querySelectorAll(".carousel").forEach((carousel) => {
  2.   const firstImg = carousel.querySelectorAll("img")[0];
  3.   const arrowIcons = carousel.closest(".wrapper").querySelectorAll("i");
  5.   let isDragStart = false,
  6.     isDragging = false,
  7.     prevPageX,
  8.     prevScrollLeft,
  9.     positionDiff;
  11.   const dragStart = (e) => {
  12.     // updatating global variables value on mouse down event
  13.     isDragStart = true;
  14.     prevPageX = e.pageX || e.touches[0].pageX;
  15.     prevScrollLeft = carousel.scrollLeft;
  16.   };
  18.   const dragging = (e) => {
  19.     // scrolling images/carousel to left according to mouse pointer
  20.     if (!isDragStart) return;
  21.     e.preventDefault();
  22.     isDragging = true;
  23.     carousel.classList.add("dragging");
  24.     positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
  25.     carousel.scrollLeft = prevScrollLeft - positionDiff;
  26.     showHideIcons();
  27.   };
  29.   const dragStop = () => {
  30.     isDragStart = false;
  31.     carousel.classList.remove("dragging");
  33.     if (!isDragging) return;
  34.     isDragging = false;
  35.     autoSlide();
  36.   };
  38.   carousel.addEventListener("mousedown", dragStart);
  39.   carousel.addEventListener("touchstart", dragStart);
  41.   document.addEventListener("mousemove", dragging);
  42.   carousel.addEventListener("touchmove", dragging);
  44.   document.addEventListener("mouseup", dragStop);
  45.   carousel.addEventListener("touchend", dragStop);
  47.   const showHideIcons = () => {
  48.     // showing and hiding prev/next icon according to carousel scroll left value
  49.     let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
  50.     arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
  51.     arrowIcons[1].style.display =
  52.       carousel.scrollLeft == scrollWidth ? "none" : "block";
  53.   };
  55.   arrowIcons.forEach((icon) => {
  56.     icon.addEventListener("click", () => {
  57.       let firstImgWidth = firstImg.clientWidth + 14; // getting first img width & adding 14 margin value
  58.       // if clicked icon is left, reduce width value from the carousel scroll left else add to it
  59.       carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
  60.       setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
  61.     });
  62.   });
  64.   const autoSlide = () => {
  65.     // if there is no image left to scroll then return from here
  66.     if (
  67.       carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) >
  68.         -1 ||
  69.       carousel.scrollLeft <= 0
  70.     )
  71.       return;
  73.     positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
  74.     let firstImgWidth = firstImg.clientWidth + 14;
  75.     // getting difference value that needs to add or reduce from carousel left to take middle img center
  76.     let valDifference = firstImgWidth - positionDiff;
  78.     if (carousel.scrollLeft > prevScrollLeft) {
  79.       // if user is scrolling to the right
  80.       return (carousel.scrollLeft +=
  81.         positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff);
  82.     }
  83.     // if user is scrolling to the left
  84.     carousel.scrollLeft -=
  85.       positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
  86.   };
  87. });
  1. /* Import Google font - Poppins */
  2. @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
  3. * {
  4.   margin: 0;
  5.   padding: 0;
  6.   box-sizing: border-box;
  7.   font-family: "Poppins", sans-serif;
  8. }
  9. body {
  10.   //display: flex;
  11.   padding: 0 35px;
  12.   min-height: 100vh;
  13.   align-items: center;
  14.   justify-content: center;
  15.   background: #343f4f;
  16. }
  17. .wrapper {
  18.   display: flex;
  19.   max-width: 1200px;
  20.   position: relative;
  21. }
  22. .wrapper i {
  23.   top: 50%;
  24.   height: 44px;
  25.   width: 44px;
  26.   color: #343f4f;
  27.   cursor: pointer;
  28.   font-size: 1.15rem;
  29.   position: absolute;
  30.   text-align: center;
  31.   line-height: 44px;
  32.   background: #fff;
  33.   border-radius: 50%;
  34.   transform: translateY(-50%);
  35.   transition: transform 0.1s linear;
  36. }
  37. .wrapper i:active {
  38.   transform: translateY(-50%) scale(0.9);
  39. }
  40. .wrapper i:hover {
  41.   background: #f2f2f2;
  42. }
  43. .wrapper i:first-child {
  44.   left: -22px;
  45.   display: none;
  46. }
  47. .wrapper i:last-child {
  48.   right: -22px;
  49. }
  50. .wrapper .carousel {
  51.   font-size: 0px;
  52.   cursor: pointer;
  53.   overflow: hidden;
  54.   white-space: nowrap;
  55.   scroll-behavior: smooth;
  56. }
  57. .carousel.dragging {
  58.   cursor: grab;
  59.   scroll-behavior: auto;
  60. }
  61. .carousel.dragging img {
  62.   pointer-events: none;
  63. }
  64. .carousel img {
  65.   height: 340px;
  66.   object-fit: cover;
  67.   user-select: none;
  68.   margin-left: 14px;
  69.   width: calc(100% / 3);
  70. }
  71. .carousel img:first-child {
  72.   margin-left: 0px;
  73. }
  75. @media screen and (max-width: 900px) {
  76.   .carousel img {
  77.     width: calc(100% / 2);
  78.   }
  79. }
  81. @media screen and (max-width: 550px) {
  82.   .carousel img {
  83.     width: 100%;
  84.   }
  85. }
  1. <!doctype html>
  2. <html lang="en" dir="ltr">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Draggable Image Slider | CodingNepal</title>
  6.     <link rel="stylesheet" href="style.css" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <link
  9.       rel="stylesheet"
  10.       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
  11.     />
  12.   </head>
  13.   <body>
  14.     <div>
  15.       <div class="wrapper">
  16.         <i id="left" class="fa-solid fa-angle-left"></i>
  17.         <div class="carousel">
  18.           <img
  19.             src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg"
  20.             alt="img"
  21.             draggable="false"
  22.           />
  23.           <img
  24.             src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg"
  25.             alt="img"
  26.             draggable="false"
  27.           />
  28.           <img
  29.             src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back01.jpg"
  30.             alt="img"
  31.             draggable="false"
  32.           />
  33.           <img
  34.             src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg"
  35.             alt="img"
  36.             draggable="false"
  37.           />
  38.           <img
  39.             src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back07.jpg"
  40.             alt="img"
  41.             draggable="false"
  42.           />
  43.         </div>
  44.         <i id="right" class="fa-solid fa-angle-right"></i>
  45.       </div>
  46.     </div>
  48.     <p>hihifdd</p>
  49.     <div class="wrapper">
  50.       <i id="left" class="fa-solid fa-angle-left"></i>
  51.       <div class="carousel">
  52.         <img
  53.           src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg"
  54.           alt="img"
  55.           draggable="false"
  56.         />
  57.         <img
  58.           src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg"
  59.           alt="img"
  60.           draggable="false"
  61.         />
  62.         <img
  63.           src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back01.jpg"
  64.           alt="img"
  65.           draggable="false"
  66.         />
  67.         <img
  68.           src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg"
  69.           alt="img"
  70.           draggable="false"
  71.         />
  72.         <img
  73.           src="https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back07.jpg"
  74.           alt="img"
  75.           draggable="false"
  76.         />
  77.       </div>
  78.       <i id="right" class="fa-solid fa-angle-right"></i>
  79.     </div>
  80.   </body>
  81. </html>

这样做的好处是，您不会在carousel变量的命名之间产生不协调--我希望它对于集合carousel是复数。

展开查看全部
赞(0）分享  回复(0）举报  2024-01-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com