无缝轮播图（vue的transition |
您所在的位置：网站首页 › 无缝衔接图案 › 无缝轮播图（vue的transition |
|
常规的无缝轮播图的写法是要通过控制banner的transition属性的有无来使得其无缝衔接 eg： css * { list-style: none; padding: 0; margin: 0; } .banner-container, .banner-view { width: 700px; height: 400px; background-color: antiquewhite; position: relative; margin: auto; } .banner-view { overflow: hidden; } .next { width: 50px; height: 50px; position: absolute; top: 50%; right: -100px; transform: translateY(-50%); background-color: burlywood; } .pre { width: 50px; height: 50px; position: absolute; top: 50%; left: -100px; transform: translateY(-50%); background-color: burlywood; } .banner { width: 700px; height: 400px; position: relative; display: flex; } .banner li { width: 700px; height: 400px; }html代码如下，通过vue来控制轮播图的位置以及显示 {{item}}script代码如下 new Vue({ el: "#app", data() { return { colorArr: ['red', 'yellow', 'skyblue'], count: 1, time: '0.3s' } }, methods: { next() { this.time='0.3s' this.count++; if (this.count == this.colorArr.length-1) { setTimeout(() => { this.time = '0s'; this.count = 1 },300) } }, pre() { this.time='0.3s' this.count-- if(this.count==0){ setTimeout(()=>{ this.time='0s' this.count=this.colorArr.length-2; },300) } } }, created() { this.colorArr.unshift(this.colorArr[this.colorArr.length - 1]); this.colorArr.push(this.colorArr[1]) console.log(this.colorArr); } })按照正常的无缝轮播图的逻辑，生成时要在数组的头部加上原来的最后一个元素，而尾部加入原来的第一个元素，从而在跳到当前位置的时候，可以关闭transition效果（或者设置0s），进而使得轮播图可以回到原来的位置而不会被发现是滚动回去的。 使用transition-group组件： Document * { padding: 0; margin: 0; list-style: none; } .banner-container { width: 700px; height: 400px; margin: auto; position: relative; /* overflow: hidden; */ } .banner-view { width: 700px; height: 400px; overflow: hidden; } .banner { width: 700px; height: 400px; background-color: antiquewhite; position: relative; } .bv-enter { left: 700px; } .bv-leave, .bv-enter-to { left: 0; } .bv-enter-active, .bv-leave-active { transition: all 1s linear; } .bv-leave-to { left: -700px; } .bc-enter { left: -700px; } .bc-leave, .bc-enter-to { left: 0; } .bc-enter-active, .bc-leave-active { transition: all 1s linear; } .bc-leave-to { left: 700px; } .banner li { width: 700px; height: 400px; position: absolute; top: 0; } .left { width: 50px; height: 50px; position: absolute; top: 50%; left: -70px; background-color: #000; } .right { width: 50px; height: 50px; position: absolute; top: 50%; right: -70px; background-color: #000; } .q-enter, .q-leave-to { opacity: 0; } .q-enter-active, .q-leave-active { transition: 0.5s; } .q-enter-to, .q-leave { opacity: 1; } {{item}} 切换7777 new Vue({ el: "#app", data() { return { count: 0, show: false, colorArr: ['red', 'yellow', 'skyblue'], names:"" } }, methods: { next() { this.names='bv' this.count++; if (this.count == 3) { this.count = 0 } }, pre() { this.names='bc' this.count--; if (this.count == -1) { this.count = 2 } } } })通过transition-group组件中的特殊css，v-enter,v-enter-active,v-enter-to,v-leave,v-leave-active,v-leave来控制轮播图的无缝滚动，需要注意的是我们通过左右两个按钮来控制轮播图的左右两个切换效果（通过改变name值），这种方法首先得了解vue的列表过度，如果有不理解的，随时联系我。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |