猫耳FM轮播图模型制作

今天咱们来研究一下猫耳FM的轮播图，它的轮播效果和往常的有些不同。先来看看它的效果~

可以看到它的切换效果的特别之处———相隔多个图片之间的切换时，当前图片到目标图片的切换是直接切换的，没有中间图片的切换效果。

这么神奇的吗？究竟如何实现的呢？今天咱们就来好好研究一下。最终的模型效果如下（不要注意样式细节~）

之前做的轮播图，都是只需要把成员图片都平铺成一行，然后直接移动整一行的水平距离（如下图所示），但若如此，就会在间隔多张图片切换的时候也会展示中间图片的效果，这显然不是我们想要的。

看来想要实现官方的效果，就不能直接移动整个行，那咋办？需要单独操作所需移动的图片

首先要把图片独立成一个个个体
每次切换，只需移出当前展示的图片以及移入目标图片
每张图片所放的位置只可能在展示窗口的左边、右边、或中间（其中第一张图片不可能在右边，最后一张不可能在左边，想想为啥）

说明：上图左右两边图的横纵轴坐标是一样的，即1和2 、4和5应该是重叠的，我这样画是为了画图方便

按上图当前状态做移动操作举例说明

中间无间隔情况

- 展示4，则3到左边，4到中间
- 展示2，则3到左边，2到中间

中间间隔若干个情况
假设，展示5，是否直接3到左边，5到中间，4依旧不动在右边呢？尚若如此，固然本轮移动能成功实现效果。但是，当从5切换为4时，我们要的效果应该是4从窗口的左边进来才对，而如今4依旧在右边，固然不行。所以说从3到5的展示，4就必须也要移动到窗口的左边。如果直接显示4从左边移动到右边，那跟直接移动一行的效果相当。那咋办？把4隐藏起来，偷偷的移动过去。 应当如下
```
- 展示5，则3到左边，4偷偷的过左边，5到中间
- 展示1，则3到右边，2偷偷的过右边，1到中间
```

得出算法

想展示当前图片的右边图片时，把当前图片移到左边，当前图片与目标图片之间的图片偷偷的移到左边，目标元素移到中间
想展示当前图片的左边图片是，把当前图片移到右边，当前图片与目标图片之间的图片偷偷的移到右边，目标元素移到中间

方法的实现

图片的移动动画：使用css3 transition 过渡对 left属性有效，使用 js 动态改变各个图片的left值。
偷偷的移动中间图片：每次移动图片前，将当前图片与目标图片的z-index值设置为-1。

总体代码

<!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>.platform {position: relative;margin: 50px auto 50px;width: 500px;height: 300px;border: 1px solid #000;}.itemList {position: relative;width: 100%;height: 100%;overflow: hidden;}.item {position: absolute;width: 100%;height: 100%;border: 1px solid #f00;background-size: cover;/*移动过渡设置*/transition: all 0.5s ease; }.selector {position: absolute;left: 50%;bottom: 10px;transform: translate(-50%, 0);cursor: default;z-index:2;}.selector .btn {display: inline-block;width: 25px;height: 25px;text-align: center;border: 1px solid #f0f;line-height: 25px;margin: 0, 10px;cursor: pointer;transition: all 0.2s ease;}.selector .btn:hover {color: #fff;background-color: #f0f;}.selector .active{color: #fff;background-color: #f0f;}</style>
</head><body><!-- 轮播图demo --><div class="platform" id="platform"><div class="itemList" id="itemList"></div><div class="selector" id="selector"></div></div>
</body>
<script>// 模拟数据const itemsJSON = [{url: 'https://static.missevan.com/homepage/banners/202105/10/54efdd9bb1133e11d7512ce8e939b80a120934.jpg'},{url: 'https://static.missevan.com/homepage/banners/202107/01/563a17e78893ed84f4f78f89de1ed775111815.jpg'},{url: 'https://static.missevan.com/homepage/banners/202106/23/196a215dc002e32baac8f0d26d758fdc115213.jpg'},{url: 'https://static.missevan.com/homepage/banners/202107/02/3a8b16f612ac373c25ebdbf9bd69fd4b114459.jpg'},{url: 'https://static.missevan.com/homepage/banners/202107/01/6863bcffd29dc02b58e413cbebff49f9181208.png'}]// 数据添加itemsJSON.forEach((item, idx) => {const elementItem = document.createElement('div');const elementBtn = document.createElement('span');document.getElementById("itemList").append(elementItem);document.getElementById('selector').append(elementBtn);elementItem.className = "item";elementItem.style.backgroundImage = `url( '${item.url}')`;elementBtn.className = 'btn';if(idx === 0) {elementBtn.classList.add('active');}elementBtn.innerHTML = idx + 1;})const items = document.getElementsByClassName("item");const platform = document.getElementById("platform");const selectBtns = document.querySelectorAll(".selector .btn");platform.curIdx = 0; // 当前展示的item的下标// 初始化items的位置和indexfunction init(width) {items[0].style.left = "0px";items[0].style.zIndex = 1;for (let i = 1; i < items.length; i++) {items[i].style.left = width + "px";items[i].style.zIndex = -1;}}init(500);/*** 向左滑动动作* */function slideLeft(items, curIdx, rearIdx, width) {// 左移当前图片items[curIdx].style.left = -width + 'px';// curIdx 与 rearIdx 之间的item 默默转左边for (let i = curIdx + 1; i < rearIdx; i++) {items[i].style.zIndex = -1;items[i].style.left = -width + 'px';}// 目标图片到中间items[rearIdx].style.zIndex = 1;items[rearIdx].style.left = 0 + 'px';platform.curIdx = rearIdx;}/*** 向右滑动操作* */function slideRight(items, curIdx, prevIdx, width) {// 右移当前图片items[curIdx].style.left = width + 'px';// prevIdx 与 curIdx 之间的item 默默转右边for (let i = prevIdx + 1; i < curIdx; i++) {items[i].style.zIndex = -1;items[i].style.left = width + 'px';}// 目标图片到中间items[prevIdx].style.zIndex = 1;items[prevIdx].style.left = 0 + 'px';platform.curIdx = prevIdx;}/*** 绑定selector btn 的点击事件* */for (let i = 0; i < selectBtns.length; i++) {selectBtns[i].onclick = function () {// 左移if (i > platform.curIdx) {clearInterval(platform.timer);// 重启定时器，0.5s恰为transition-duration的值，0.5s 所有移动都已结束setTimeout(() => {platform.timer = autoSlide(2000, 500);}, 500)setSelectStyle(i);slideLeft(items, platform.curIdx, i, 500)}// 右移else if (i < platform.curIdx) {clearInterval(platform.timer);// 重启定时器，0.5s恰为transition-duration的值setTimeout(() => {platform.timer = autoSlide(2000, 500);}, 500)setSelectStyle(i);slideRight(items, platform.curIdx, i, 500);}}}/*** 自动轮播* */function autoSlide(time, width) {return setInterval(() => {const nextIdx = (platform.curIdx + 1) % items.length;setSelectStyle(nextIdx);// 如果是最后一个则右移回到第一个if(nextIdx === 0) {slideRight(items, platform.curIdx, nextIdx, width);}else{slideLeft(items, platform.curIdx, nextIdx, width);}}, time)}platform.timer = autoSlide(2000, 500);/*** 选择按钮样式设置* */function setSelectStyle(curIdx) {selectBtns[curIdx].classList.add('active');for(let i = 0; i < selectBtns.length; i ++) {if(i != curIdx){selectBtns[i].classList.remove("active")} }}</script></html>

没有设置z-index时的效果图，可以发现中间的图片依旧能看见

轮播切换原理图

最终效果图

以上方法仅供参考，实现方法多样，鼓励大家多尝试其他方法。

猫耳FM轮播图模型制作相关推荐

第一节安卓自定义轮播图的制作
专栏目录第一节自定义轮播图的制作第二节底部导航栏菜单,炫酷菜单动画,背景变暗.按钮焦点获取第三节适配Android10的拍照.从相册获取代码,包括完整的权限申请和图片地址获取第四节百度 ...
轮播图详细制作思路与过程
轮播图详细制作思路与过程图片轮播我们经常在众多网站中看到,各种轮播特效有着非常美观炫酷的视觉效果.很多初学js的小伙伴都很心生向往.我也不例外,所以在此分享个写轮播图的思路和过程,有不足之处请多多指 ...
HTML轮播图的制作【此处小编的代码部分并没有加入JavaScript部分】
在浏览一些网站的页面时,我们经常能看到图片不断播放的效果,在HTML当中就可以制作出来,由于小编目前还没有完全掌握JavaScript,做出来的效果可能没有轮播效果,这个小编会在以后将轮播效果的加入进 ...
网站中轮播图的制作方法
制作思路将轮播图分为三个部分,分别为视口区,滚动区和图片. 1.视口区.即可看见图片的地方,将其固定不动. 2.滚动区.该区域需要产生图片轮流出现的效果,因而需要给此区域添加动画效果.宽度为所有图片 ...
html怎么做产品轮播图,商品轮播图是什么意思（html轮播图怎么制作）
但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进去的工具呢? 不论将这个问题抛向谁,他们都会告诉你,"轮播图就是个反面模式(anti-pattern)."轮播 ...
Jquery轮播图制作
我的个人主页:http://www.zcool.com.cn/u/14498773 前端Jquery轮播图制作前言:网站是否让人感觉高端大气上档次,最重要的就是轮播图,所以做好轮播图尤为重要!以前要 ...
html 轮播图+二级菜单制作
1.html 轮播图+二级菜单制作 2.sunny前面写过二级菜单的制作以及轮播图的制作,这一次sunny把他们结合在一起了ヾ(≧▽≦*)o
老徐WEB：最简单详细的轮播图原理和制作过程（一）
老徐利用空闲时间,制作了一个最简单的轮播图,主要介绍轮播图的原理和制作过程,只要大家能认真看完这篇文章,并理解文中内容,就能完全掌握轮播图的制作了.之后工作中碰到复杂的轮播图,自己也能思考制作出来了. ...
画布之轮播图片HTML5,Axure原型设计之轮播图
轮播图是网页设计或者APP设计常见的元素,学会使用axure原型工具制作轮播图对制作PC端或者移动端的原型都非常有帮助.现在讲讲如何使用axure8.0制作轮播图原型~~ 步骤一:(轮播图动态面板) ...

猫耳FM轮播图模型制作

猫耳FM轮播图模型制作

按上图当前状态做移动操作举例说明

得出算法

方法的实现

总体代码

猫耳FM轮播图模型制作相关推荐

最新文章

热门文章