用贪吃蛇小游戏的思路手写一个无限循环滚动轮播图

简介: 在某些业务场景下,接入第三方库实现轮播图效果可能并没有那么好用,笔者在接入Swiper插件失败后,还是决定手写一个。那么关于手写轮播图有很多文章已经讲过了,其核心原理是将图片排成一排,设置外层的Div超出隐藏,然后改变定位来实现轮播效果,这样通常不能首尾循环滚动,本文记录了一种对无限循环滚动效果的实现方式。

实现的思路很简单,就是和“贪吃蛇”游戏中蛇身体的移动逻辑一样,每次前进的时候先删除尾部元素,然后再添加到头部,这样无论身体多庞大,始终只有两个元素在改变位置:

image.png

基础效果

有了思路,就不难写出轮播了,这里为了方便使用Vue2创建演示,后面会放上完整Demo及源码,文章只讲思路,就不贴大段代码了,有需要的小伙伴可以先点个收藏~

其中前进还是一样通过改变left来滚动,只是在滚动结束后便立刻修改数据:

// 核心代码
const ulDom = document.getElementsByClassName('ul')[0] // 拿到页面Dom实例
ulDom.style.left = xxx // 控制滚动,注意需要设置transition才有动画

this.images.push(this.images.shift()) // 对轮播列表的数组首尾元素互换

2022-08-15 16.16.25.gif

但是回退就有点不一样了,试想如果此时在第一张图,那么向左跳转的话是没有数据的,也就会产生空白的一片,所以回退做了特殊处理,先把尾部添加到数组前面,同时悄悄地轮播到下一张(去除动画效果),然后才进行回退的操作,等动画结束后pop()把数组末尾删除:

2022-08-15 16.21.21.gif

从页面效果上可能没什么感觉,我们放慢来看看DOM是如何变化的:

2022-08-15 16.01.14.gif

列表虚拟化

可能大家也注意到了,在这个实例中“当前选中”下标是要另外计算的,因为真实的数组下标总是在来回加1减1地改变而已,所以我们可以在此基础上轻松做出一个虚拟列表,做到真正的“无限”滚动。

假设轮播数组足够大,且页面结构又繁多复杂情况下,直接渲染轮播会产生很多DOM结构,这将导致页面性能下降,下面放上完整在线代码演示,你可以修改“列表总数”为9999,然后关闭虚拟列表开关,此时你可能会卡到根本点不动轮播:

代码片段

一般来说可能不会有大量轮播图的场景,笔者的业务需求是在数据大屏中展示海报视频等轮播,而数据量是没有上限的,就可能会出现大量轮播数据的请求。

此时根据“展示个数”动态的修改实际渲染的DOM个数,无论来多少张轮播都不会影响到性能了,利用Vue的计算属性可以很轻松地做到:

computed: {
    realImages() {
      return this.images.slice(0, Number(this.slidesPerView) + 2)
      // this.slidesPerView 即为展示个数,轮播图实际渲染个数总长度只会比展示个数多两个
    },
  },

图片加载闪动

这是后续的一个优化点,由于数据截取的原因,我会一直改变渲染的数组,在页面中的表现为图片突然更换了地址,如果该元素节点存在上一张图片,则会产生闪动:

如下图,可以看到我停留在第10张时啥也没做,但由于新的图片url其实还在加载,等到加载完了显示出来,图片突然闪动变化,体验就非常怪。

2022-08-15 16.54.40.gif

于是我重新写了一个图片容器组件来代替img标签,组件在img上层覆盖上一个loading遮罩,利用img标签的onLoad事件来判断图片加载完成,再隐藏loading,每次src改变的时候就重新出现loading,代码实现非常简单:

<template>
  <div class="img__box">
    <div v-show="loading" class="load"></div>
    <img v-show="!loading" :src="src" @load="loadDone" />
  </div>
</template>

<script>
export default {
  props: {
    src: {},
  },
  data() {
    return {
      loading: false,
    }
  },
  watch: {
    src() {
      this.loading = true
    },
  },
  methods: {
    loadDone() {
      this.loading = false
    },
  },
}
</script>

<style scoped>
.img__box {
  position: relative;
  overflow: hidden;
}
.img__box > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.load {
  position: absolute;
  width: 100%;
  height: 100%;
}
.load::after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 30px;
  margin-left: -15px;
  height: 30px;
  margin-top: -15px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-top-color: transparent;
  border-radius: 100%;
  animation: circle infinite 0.75s linear;
}

@keyframes circle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

这样把轮播的img标签直接替换为这个组件就解决问题了:

2022-08-15 17.01.03.gif

最后附上:完整的Demo源码

相关文章
|
7月前
|
前端开发 JavaScript 算法
前端面试100道手写题(7)—— 循环轮播图
前端面试100道手写题(7)—— 循环轮播图
113 0
|
1月前
好看的粒子特效代码
好看的粒子特效代码,鼠标可以拖住旋转或者放大,喜欢的话可以拿去使用
33 2
扫雷的简单实现
扫雷的简单实现
56 0
|
7月前
只用一个背景图片实现九宫格抽奖(uniapp纯代码)
只用一个背景图片实现九宫格抽奖(uniapp纯代码)
84 0
|
前端开发 JavaScript
前端切图:一句代码实现返回顶部
前端切图:一句代码实现返回顶部
56 0
|
JavaScript 前端开发
原生JS手写扫雷小游戏
实现一个完整的扫雷游戏需要一些复杂的逻辑和界面交互。我将为你提供一个简化版的扫雷游戏示例,帮助你入门。请注意,这只是一个基本示例,你可以根据自己的需求进行扩展和改进。
97 0
|
小程序 前端开发 JavaScript
让小程序动起来-轮播图的两种方式--【浅入深出系列003】
让小程序动起来-轮播图的两种方式--【浅入深出系列003】
|
小程序 开发者
如何实现一个好看的金币效果
如图,是我最新上线的游戏【彩虹星球大冒险】中的金币拾取效果,打金币作为这个游戏中的一个非常重要的体验,把金币拾取效果做的好看就显得尤为重要。今天就跟大家分享一个,如何实现一个这样好看的金币拾取效果。 观察一下上面的动图,金币从出现到消失总共是分为两个过程的。 金币从爆炸的物体中向上弹出,并进行旋转下落 玩家碰到金币后,金币放大旋转然后飞到屏幕的左上角记录金币的位置后消失 接下来我们以一个具体的实例,来逐步的实现整个金币效果。
229 0
|
存储 数据可视化
扫雷游戏简单实现
扫雷游戏简单实现
|
Java
Java实现拼图小游戏(7)——查看完整图片(键盘监听实例2)
由于在移动和图片中我们已经添加了键盘监听,也继承了键盘监听的接口,那么我们只需要在重写方法内输入我们的代码即可
224 0