文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript如何实现无缝轮播图

2023-07-02 16:08

关注

这篇文章主要讲解了“JavaScript如何实现无缝轮播图”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript如何实现无缝轮播图”吧!

效果

JavaScript如何实现无缝轮播图

一、实现过程

1)首先实现基本布局

 <div class="carousel-container">    //图片列表    <div class="carousel-list"></div>    //上一张    <div class="carousel-arrow carousel-arrow-left">&lt</div>    //下一张    <div class="carousel-arrow carousel-arrow-right">&gt</div>    //导航点    <div class="indicator">      <span class="active"></span>      <span></span>      <span></span>    </div>  </div>

2)主要样式

简单布局样式就不说了,主要讲如何将图片横向排列起来

先给容器设置相对定位,通过overflow将超出部分隐藏

.carousel-container {      position: relative;      width: 500px;      height: 300px;            background-color: #ccc; }

然后图片列表设置相对定位和flex盒子,这样每一个滑块就横向排列成一排了

.carousel-container .carousel-list {      position: relative;      display: flex;      height: 100%;      width: 100%; }

左右滑动按钮通过绝对定位+transform的方式移动到两边,导航点也是一样,就不一一详说了

二、如何实现无缝呢 (重点来了)

思路:

先实现向后滚动无缝连接,将最后一张复制一份放到最前面,当滚动到最后一张时,再次滚动,将要滚动到第一张时,先取消过渡transition,瞬间跳到最前面复制的那张上,然后继续运行动画到第一张,这样看起来就无缝了

向前滚动无缝连接,思路同上,复制第一张图片放到最后,当滚动到第一张,再次滚动时,瞬间跳到最后复制的那张图片上,继续滚动到轮播图的最后一张上。

JavaScript如何实现无缝轮播图

主要代码

先获取到dom元素,currentIndex是当前轮播到的图片下标

let currentIndex = 0;const doms = {      carouselList: document.querySelector('.carousel-list'),      arrowLeft: document.querySelector('.carousel-arrow-left'),      arrowRight: document.querySelector('.carousel-arrow-right'),      indicator: document.querySelectorAll('.indicator span')    }

先初始化dom,复制图片

// 复制第一张放最后,最后一张图片放第一张之前    function init() {      let lastImg = doms.carouselList.lastElementChild.cloneNode(true)      let firstImg = doms.carouselList.firstElementChild.cloneNode(true)      doms.carouselList.appendChild(firstImg)      doms.carouselList.insertBefore(lastImg, doms.carouselList.firstElementChild)      lastImg.style.position = 'absolute'      lastImg.style.transform = 'translateX(-100%)'    }    //执行一下    init()

实现到任意一张图片的方法

function moveTo(index) {      doms.carouselList.style.transform = `translateX(-${index * 100}%)`      doms.carouselList.style.transition = '.5s'      // 去掉导航点选中效果      let active = document.querySelector('.indicator span.active')      active.classList.remove('active')      // 添加选中效果      doms.indicator[index].classList.add('active')      currentIndex = index    }

给导航点绑定点击跳转事件

// 给导航点添加事件    doms.indicator.forEach((item, i) => {      item.onclick = function () {        moveTo(i);      }    })

给前后按钮绑上执行事件,判断边界图片,及时取消过渡效果,瞬间跳到复制的图片位置,调用moveTo到第一张或最后一张图片上。

let indicatorLength = doms.indicator.length;    function preSlide() {      if (currentIndex === 0) {        doms.carouselList.style.transition = 'none'        doms.carouselList.style.transform = `translateX(-${indicatorLength * 100}%)`        doms.carouselList.clientHeight        moveTo(indicatorLength - 1)      } else {        moveTo(currentIndex - 1)      }    }    function nextSlide() {      if (currentIndex === doms.indicator.length - 1) {        doms.carouselList.style.transition = 'none'        doms.carouselList.style.transform = 'translateX(100%)'        doms.carouselList.clientHeight        moveTo(0)      } else {        moveTo(currentIndex + 1)      }    }    doms.arrowLeft.onclick = function () {      preSlide();    }    doms.arrowRight.onclick = function () {      nextSlide()    }

最后使用定时器调用nertSlide方法就实现自动播放了

function start(time = 2000) {      setInterval(() => {        nextSlide()      }, time)    }    start()

完整代码

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <style>    * {      margin: 0;      padding: 0;      box-sizing: border-box;    }    .carousel-container {      margin: 0 auto;      position: relative;      width: 500px;      height: 300px;            background-color: #ccc;    }    .carousel-container .carousel-list {      position: relative;      display: flex;      height: 100%;      width: 100%;    }    .carousel-container .carousel-list .slide {      flex: 0 0 100%;      height: 100%;      width: 100%;    }    .slide a {      display: flex;      justify-content: center;      align-items: center;      height: 100%;      width: 100%;    }    .slide a img {      width: 100%;    }    .carousel-container .carousel-arrow {      display: none;      position: absolute;      width: 36px;      height: 36px;      border-radius: 50%;      color: white;      text-align: center;      line-height: 36px;      cursor: pointer;      background-color: rgba(31, 45, 61, .2);    }    .carousel-container:hover .carousel-arrow {      display: block;    }    .carousel-container:hover .carousel-arrow:hover {      background-color: rgba(31, 45, 61, .4);    }    .carousel-container .carousel-arrow-left {      top: 50%;      left: 2%;      transform: translateY(-50%);    }    .carousel-container .carousel-arrow-right {      top: 50%;      right: 2%;      transform: translateY(-50%);    }    .carousel-container .indicator {      display: flex;      position: absolute;      left: 50%;      top: 90%;      transform: translateX(-50%)    }    .carousel-container .indicator span {      margin: 2px 5px;      padding: 3px;      width: 5px;      height: 5px;      border: 1px solid white;      border-radius: 5px;    }    .active {      background-color: #fff;    }  </style></head><body>  <div class="carousel-container">    <div class="carousel-list">      <div class="slide">        <a href="">          <img            src="https://ts4.cn.mm.bing.net/th?id=OIP-C.kB-Ovasi0GW67-rmwnAcwAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2">        </a>      </div>      <div class="slide">        <a href="">          <img            src="https://ts1.cn.mm.bing.net/th?id=OIP-C.QPH1IBosDYBqaU3O6wV3YAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"></a>      </div>      <div class="slide">        <a href="">          <img            src="https://ts2.cn.mm.bing.net/th?id=OIP-C.P3NSGTdAYdyqy5zJpb5QXQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"            alt=""></a>      </div>    </div>    <div class="carousel-arrow carousel-arrow-left">&lt</div>    <div class="carousel-arrow carousel-arrow-right">&gt</div>    <div class="indicator">      <span class="active"></span>      <span></span>      <span></span>    </div>  </div></body><script>  window.onload = function () {    const doms = {      carouselList: document.querySelector('.carousel-list'),      arrowLeft: document.querySelector('.carousel-arrow-left'),      arrowRight: document.querySelector('.carousel-arrow-right'),      indicator: document.querySelectorAll('.indicator span')    }    let currentIndex = 0;    function moveTo(index) {      doms.carouselList.style.transform = `translateX(-${index * 100}%)`      doms.carouselList.style.transition = '.5s'      // 去掉导航点选中效果      let active = document.querySelector('.indicator span.active')      active.classList.remove('active')      // 添加选中效果      doms.indicator[index].classList.add('active')      currentIndex = index    }    // 给导航点添加事件    doms.indicator.forEach((item, i) => {      item.onclick = function () {        moveTo(i);      }    })    // 复制第一张放最后,最后一张图片放第一张之前    function init() {      let lastImg = doms.carouselList.lastElementChild.cloneNode(true)      let firstImg = doms.carouselList.firstElementChild.cloneNode(true)      doms.carouselList.appendChild(firstImg)      doms.carouselList.insertBefore(lastImg, doms.carouselList.firstElementChild)      lastImg.style.position = 'absolute'      lastImg.style.transform = 'translateX(-100%)'    }    let indicatorLength = doms.indicator.length;    function preSlide() {      if (currentIndex === 0) {        doms.carouselList.style.transition = 'none'        doms.carouselList.style.transform = `translateX(-${indicatorLength * 100}%)`        doms.carouselList.clientHeight        moveTo(indicatorLength - 1)      } else {        moveTo(currentIndex - 1)      }    }    function nextSlide() {      if (currentIndex === doms.indicator.length - 1) {        doms.carouselList.style.transition = 'none'        doms.carouselList.style.transform = 'translateX(100%)'        doms.carouselList.clientHeight        moveTo(0)      } else {        moveTo(currentIndex + 1)      }    }    doms.arrowLeft.onclick = function () {      preSlide();    }    doms.arrowRight.onclick = function () {      nextSlide()    }    function start(time = 2000) {      setInterval(() => {        nextSlide()      }, time)    }    start()    init()  }</script></html>

感谢各位的阅读,以上就是“JavaScript如何实现无缝轮播图”的内容了,经过本文的学习后,相信大家对JavaScript如何实现无缝轮播图这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯