aiheyoghurt_ 2022-10-18 10:22 采纳率: 100%
浏览 26
已结题

JavaScript图片切换

请问 goToslide 函数中 这段代码中的 i 和 slide 他们都会成长 差应该都是一样呀 ,为什么会切换下一张图片

(s, i) => (s.style.transform = translateX(${100 * (i - slide)}%))

    <section>
      <div class="slider">
        <div class="slide"><img src="img/img-1.jpg" alt="Photo 1" /></div>
        <div class="slide"><img src="img/img-2.jpg" alt="Photo 2" /></div>
        <div class="slide"><img src="img/img-3.jpg" alt="Photo 3" /></div>
        <div class="slide"><img src="img/img-4.jpg" alt="Photo 4" /></div>
        <button class="slider__btn slider__btn--left"></button>
        <button class="slider__btn slider__btn--right"></button>
        <div class="dots"></div>
      </div>
    </section>

    <script>
      const slides = document.querySelectorAll('.slide');
      const btnLeft = document.querySelector('.slider__btn--left');
      const btnRight = document.querySelector('.slider__btn--right');
      const dotContainer = document.querySelector('.dots');

      let curSlide = 0;
      const maxSlide = slides.length - 1;

      const createDots = function () {
        slides.forEach(function (_, i) {
          dotContainer.insertAdjacentHTML(
            'beforeend',
            `<button class="dots__dot" data-slide="<span class="hljs-subst">${i}" ></button>`
          );
        });
      };
      createDots();

      const goToSlide = function (slide) {
        slides.forEach(
          (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
        );
      };
      goToSlide(0);

      const nextSlide = function () {
        if (curSlide === maxSlide) {
          curSlide = 0;
        } else {
          curSlide++;
        }
        console.log(curSlide);
        goToSlide(curSlide);
      };

      const prevSlide = function () {
        if (curSlide === 0) {
          curSlide = maxSlide;
        } else {
          curSlide--;
        }
        goToSlide(curSlide);
      };

      btnRight.addEventListener('click', nextSlide);
      btnLeft.addEventListener('click', prevSlide);
    </script>
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-10-18 10:32
    关注

    切换正常的,题主问题是什么?通过translateX将图片水平平移实现显示隐藏。

    i是遍历到的slides的下标,slide是当前要显示的curSlide的值固定的,只有一次相同的机会

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 10月26日
  • 已采纳回答 10月18日
  • 创建了问题 10月18日

悬赏问题

  • ¥15 Bibtex4Word 引用中文文献
  • ¥20 用opencv c/c++ 转换成灰度图,然后做一下直方图均衡,输出mp4文件
  • ¥20 matlab中的双层数值积分
  • ¥50 服务器打印水晶报表问题
  • ¥30 gradle环境下javafx项目如何使用druid连接池
  • ¥15 服务器打印水晶报表问题
  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题