在vue脚手架中，学习实现一个轮播图（2-旋转木马）

效果展示：

index.html:

template：

data：

methods：

mounted()：

style:

效果展示：

轮播图（旋转木马）

index.html:

    <style type="text/css">*{box-sizing: border-box;overflow: hidden;}</style>

template：

<template><div class="outest"><div class="before-ul" @click="user_move(-1)">&lt;</div><!-- 旋转木马轮播图 --><ul class="content" style="left:0px" ref="ul"><li ref="li" v-for="e of images" :key="e.id" style="transform:scale(1);opacity:0.68;zIndex:0;"><img class="picture"  :src="e.src" :alt="e.alt"><div class="text">{{e.alt}}</div></li></ul><div class="after-ul" @click="user_move(1)">&gt;</div><!-- 底部的圆点 --><div><ul class="sub-circle"><li ref="circle" v-for="e of images" :key="e.id"></li></ul></div></div>
</template>

data：

图片素材来自网络！

        return{images:[{src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F120470823%2F80cf36c23f744bdf992abb21619714dc.jpeg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTIwNDcwODIzLzgwY2YzNmMyM2Y3NDRiZGY5OTJhYmIyMTYxOTcxNGRjLmpwZWc%3D%2Fsign%2F41e170ae81aa27e57d5687de957d9609.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663387064&t=71853af48512807d15ee43cb3a41737a",alt:"滕王阁",id:"aaa"},{src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2F20170411%2F77c8-fyeceza2014459.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663387194&t=763a6f4f2f6f61606b802285fb955be8",alt:"岳阳楼",id:"bbb"},{src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnews.cnhubei.com%2Fa%2F10001%2F202202%2F536db75fa423794d829cb72eec0a0699.jpeg&refer=http%3A%2F%2Fnews.cnhubei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663387251&t=6a8b11f5a2c0447014185710b623a302",alt:"黄鹤楼",id:"ccc"},{src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F5738464%2F2ff02d9e5837e9702d35886742752e0f.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNTczODQ2NC8yZmYwMmQ5ZTU4MzdlOTcwMmQzNTg4Njc0Mjc1MmUwZi5qcGc%3D%2Fsign%2Fe2a10a52c511e52abe6fb5006bcc78fe.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663387424&t=420622e9f16446deee38b3171f123ea3",alt:"鹤雀楼",id:"ddd"},{src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180809%2F941e123006494773931d546abc5b57b3.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663387463&t=490048000ebfcda3a1b904271d9ab81d",alt:"蓬莱阁",id:"eee"},],tipIndex:1,                 // 0-4 用于更新底部圆点  共 5个真实 liisChanging:false,           // 是否正在变换userChanging:false,         // 是否是用户触发的变换}

methods：

        moving(direction){              //控制ul移动的方法 1为 ul左移，-1为 ul右移if(direction != 1 && direction != -1){return;}this.isChanging = true;                     // “ 封闭式执行任务，新的任务不能打扰 ，不接新任务”if(direction === 1){if(this.tipIndex === 6){                //一个循环之后恢复初始化，即只有下标为 1 的li处于放大状态this.tipIndex = 1;this.adjust(this.tipIndex, 6, 0);}new Promise((res,rej)=>res(this.moveLeft())).then(val => this.tipIndex++);}else{if(this.tipIndex === 1){                // 先把ul整体瞬移到 以下标为6的li位于中间的位置 再进行右移this.adjust(6, this.tipIndex, -1600);}new Promise((res,rej)=>res(this.moveRight())).then(val => {if( -- this.tipIndex < 0){this.tipIndex = 4;}})}},moveLeft(){                     // ul 向左移动let index = this.tipIndex;//切换底部圆点this.$refs.circle[index%5].style.background="hsl(0,0%,90%)";this.$refs.circle[(index+1)%5].style.background='hsl(0,0%,60%)';let element = this.getEle('li');element[index+1].style.zIndex='10';element[index].style.zIndex='0';//切换图片 t为变换次数 共32次，每隔10毫秒变换一次，依照宽度来改变，每次左移32px，320ms后移动一个li的距离let t = 0;let moveLeft = setInterval(()=>{//整体移动ulthis.getEle('ul')[0].style.left = Number.parseInt(this.getEle('ul')[0].style.left) - 10 + 'px';//下一个li放大，变清晰element[index+1].style.transform=`scale(${1 + 0.5 / 32 * t})`;element[index+1].style.opacity=`${0.36 + t * 0.02}`;//当前li缩小，变模糊element[index].style.transform=`scale(${1.5 - 0.5 / 32 * t})`;element[index].style.opacity=`${1 - t * 0.02}`;t++;if(t >= 32){        //运动一个li默认的宽度之后停止定时任务if(this.userChanging){this.userChanging = false;window.timer = this.defaultTimer();}this.isChanging = false;clearInterval(moveLeft);}},10);},moveRight(){                    // ul 向右移动let index = this.tipIndex;  //用this.tipIndex来更新圆点，用index来更新ul、liif(index === 1){index = 6;}else if(index === 0){index = 5;}this.$refs.circle[this.tipIndex % 5].style.background="hsl(0,0%,90%)";this.$refs.circle[(this.tipIndex - 1 < 0) ? 4 : (this.tipIndex - 1)].style.background='hsl(0,0%,60%)';let element = this.getEle('li');element[index-1].style.zIndex='10';element[index].style.zIndex='0';//切换图片 t为变换次数 共32次，每隔10毫秒变换一次，依照宽度来改变，每次右移32px，320ms后移动一个li的距离let t = 0;let moveright = setInterval(()=>{//整体移动ulthis.getEle('ul')[0].style.left = Number.parseInt(this.getEle('ul')[0].style.left) + 10 + 'px';//上一个li放大，变清晰element[index-1].style.transform=`scale(${1 + 0.5 / 32 * t})`;element[index-1].style.opacity=`${0.36 + t * 0.02}`;//当前li缩小，变模糊element[index].style.transform=`scale(${1.5 - 0.5 / 32 * t})`;element[index].style.opacity=`${1 - t * 0.02}`;t++;if(t >= 32){        //运动一个li默认的宽度之后停止定时任务this.isChanging = false;if(this.userChanging){this.userChanging = false;window.timer = this.defaultTimer();}clearInterval(moveright);}},10);},adjust(largeIndex, smallIndex, left){let element = this.getEle('li');element[largeIndex].style.transform='scale(1.5)';element[largeIndex].style.opacity='1';element[largeIndex].style.zIndex='10';element[smallIndex].style.transform=`scale(1)`;          element[smallIndex].style.opacity=`0.36`;element[smallIndex].style.zIndex='0';this.getEle('ul')[0].style.left = left + 'px';},getEle(name){                   //封装一个操作dom的函数return document.getElementsByTagName(name);},// 调用这个函数用来给 window 添加一个 默认的定时器，// 只有在用户主动点击切换的时候这个定时器被清除，但执行完用户的切换后又将立马加上defaultTimer(){                 return setInterval(()=>{this.moving(1);      // 参数1 是默认向左整体移动ul  即将当前li缩小，下一个li放大},3500);},user_move(val){// 如果当前 window.timer 定时器正在进行切换动作 或者 用户此前点击的切换事件正在执行，则不在执行用户此次的动作if(this.isChanging || this.userChanging){       return;}clearInterval(window.timer);            // 先清除默认的定时器this.userChanging = true;               // 设置用户主动进行的切换动作正在执行this.moving(val);                       // 预执行}

mounted()：

        //监视浏览器窗口的改变，当浏览器窗口最小化时，将默认定时器停掉，当浏览器可视时，再开启document.addEventListener('visibilitychange',()=>{          if(document.visibilityState === 'hidden'){clearInterval(window.timer);}else if(document.visibilityState === 'visible'){window.timer = this.defaultTimer();}})for(let i=0; i<3; i++){         //深克隆最前面四个li放在ul的后面let templi=this.getEle('li')[i].cloneNode(true);this.getEle('ul')[0].appendChild(templi);}let element = this.getEle('li');//初始化构造，将索引为 1 的li放大，变清晰element[this.tipIndex].style.transform='scale(1.5)';element[this.tipIndex].style.opacity='1';element[this.tipIndex].style.zIndex='10';this.$refs.circle[this.tipIndex].style.background='hsl(0,0%,60%)';// 全局默认定时器window.timer = this.defaultTimer();

style:

.outest{--custom-width:960px;--custom-height:400px;--custom-img-number:5;width: var(--custom-width);height: var(--custom-height);border-radius: 0.5rem;border: 1px solid hsl(0, 0%, 75%);position: relative;
}
.content{width:calc(var(--custom-width) * --custom-img-number);height: var(--custom-height);padding: 0;margin: 0;position: absolute;display: flex;
}
.content > li{width: calc(var(--custom-width) / 3);list-style: none;display: flex;flex-direction: column;justify-content: center;align-items: center;background:hsl(0,0%,90%);
}
.picture{width: 100%;height: calc(var(--custom-height) / 2);margin-bottom: 0.5em;
}
.text{font-size: 1.3rem;font-weight: 800;text-align: center;
}/** 向左向右按键 */
.before-ul,.after-ul{font-size: 1.5rem;font-weight: 900;padding: 0.3rem;background: hsl(0 ,0% ,80%) ;opacity: 0.4;z-index: 20;position: absolute;top: 50%;transform: translate(0,-50%) scaleY(2);
}
.before-ul{left:0px;border-top-right-radius: 0.3rem;border-bottom-right-radius: 0.3rem;
}
.after-ul{right: 0px;border-top-left-radius: 0.3rem;border-bottom-left-radius: 0.3rem;
}
.before-ul:active{color: hsl(0,90%,40%);box-shadow: 0.5px 0.5px;
}
.after-ul:active{color: hsl(0,90%,40%);box-shadow: 0.5px 0.5px;
}
.before-ul:hover{cursor: pointer;opacity: 1;font-weight: bolder;
}
.after-ul:hover{cursor: pointer;opacity: 1;font-weight: bolder;
}/**底部小圆圈 */
.sub-circle{position: absolute;left: 3%;bottom: 20px;display: flex;justify-content: space-around;padding: 0px;margin: 0px;z-index: 100;
}
.sub-circle > li{list-style: none;padding: 0.5rem;margin: 0.1rem;border-radius: 180px;background: hsl(0, 0%, 90%);
}

在vue脚手架中，学习实现一个轮播图（2-旋转木马）相关推荐

vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
案例——封装一个轮播图插件
说起插件,可能很多人搞不清楚插件和类库.组件.框架的区别,在这里,我先来简单的聊一聊它们之间的区别和联系类库提供一些真实项目中常用的方法,任何项目都可以把类库导入进来,调取里面的方法实现自己需要的 ...
用RecyclerView打造一个轮播图
通常Android的轮播图(俗名:Banner)都是用ViewPager实现的,但是我在实际项目运用中碰到了一些小问题,于是决定另寻思路,采用RecyclerView这个更优雅更强大的控件来实现轮播的 ...
html轮播图原理,30_用js实现一个轮播图效果，简单说下原理
一.原理将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...
flutter CustomScrollView中使用Swiper做轮播图问题
有朋友问我CustomScrollView中使用Swiper做轮播图问题以前没这么用过,也是才发现CustomScrollView 与 Swiper 冲突,直接报错. 网友说修改源码,试过不能用,但 ...
用jq简单的去做一个轮播图
在生活中我们会经常去在淘宝上购买商品,网页上有一个可以滑动的图片今天我们用jq去做一个轮播图我们先做好一个盒子和轮播图的一个框架 <div class="zt"> & ...
[css] 用CSS实现一个轮播图
[css] 用CSS实现一个轮播图使用CSS实现的话,可以使用 animat属性和overflow:hidden 属性来做. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
vue 实现无限轮播_用vue写一个轮播图效果
轮播图在网站中几乎无处不在,占用地方少,交互性好.今天就来聊聊如何用vue实现一个轮播效果. 一.原理在轮播图数组dataList中,定义一个变量currentIndex = 0表示第一张图片,默认 ...
VUE如何快速做一个轮播图
1. 第三方插件 https://github.com/surmon-china/vue-awesome-swiper npm install swiper vue-awesome-swiper -- ...

在vue脚手架中，学习实现一个轮播图（2-旋转木马）

效果展示：

index.html:

template：

data：

methods：

mounted()：

style:

在vue脚手架中，学习实现一个轮播图（2-旋转木马）相关推荐

最新文章

热门文章