vue 实现无限轮播_vue实现一个轮播效果

我就是我 2022-11-05 15:58 312阅读 0赞

template lang="html">

上一项

下一项

*

1.

data()\{return\{

cur:0,

banners: \[\{src: img1\},\{src: img2\},\{src: img3\}\],

timer:null\}

\},

created()\{this.startAutoPlay();

\},

beforeDestroy()\{this.endAutoPlay();

\},

methods:\{

prev()\{if(this.cur==0)\{this.cur=this.banners.length-1;

\}else\{this.cur--;

\}

\},

next()\{if(this.cur==this.banners.length-1)\{this.cur=0;

\}else\{this.cur++;

\}

\},

startAutoPlay()\{this.timer=setInterval(this.next, 2000);

\},

endAutoPlay()\{

clearInterval(this.timer);

\}

\}

\}

/\*banner\*/.banner \{height:420px;position:relative;\}

.banner-container \{width:1920px;height:420px;position:absolute;left:0;top:0;z-index:1;opacity:0;transition:.7s all ease\}

.banner-container img \{width:1920px;height:420px;\}

.banner-container.cur \{opacity:1;\}

.banner .btn \{

position:absolute;

z-index:2;

left:50%;top:200px;

text-indent:-99999px;

width:50px;height:50px;border-radius:50%;

background-color:\#D0C4AF;

background-image:url(../assets/images/icon2.png);

background-repeat:no-repeat;

\}

.banner .btn:hover \{background-color:\#B19E7A;\}

.banner .btn.prev \{background-position:0 -5384px;margin-left:-605px;\}

.banner .btn.next \{background-position:0 -5604px;margin-left:555px;\}

.banner .number-list \{position:absolute;left:0;width:100%;bottom:4px;text-align:center;z-index:2;\}

.banner .number-list li \{

display:inline-block;

width:8px;height:8px;

margin:08px 10px;

cursor:pointer;

background:\#FFF;

border-radius:50%;

border:1px solid \#cecece;

transition:.7s all ease

\}

.banner .number-list .active \{

background:\#a7936e;

box-shadow:0 0 04px \#dfcead;

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，312人围观）

还没有评论，来说两句吧...

相关阅读

相关基于vue轮播效果

里废话不多说了,直接上代码,提供参考: <template> <div class="slider"> <div class="windo...

「爱情、让人受尽委屈。」/ 2024年04月19日 12:39/ 0 赞/ 84 阅读

相关 vue 实现无限轮播_vue实现一个轮播效果

template lang="html"> 上一项下一项 1. data()\{return\{ cur:0, banners: \[\{src:

我就是我/ 2022年11月05日 15:58/ 0 赞/ 313 阅读

相关 html vue轮播图,webpack+Vue实现轮播图

前言本来如果只是想做个轮播图的话不太需要这么麻烦的构建webpack项目，但是我的目的不是只做个轮播图这么简单，主要是想用webpack搭建一个vue项目，然后在里面实现了

迈不过友情╰/ 2022年10月19日 01:39/ 0 赞/ 277 阅读

相关 Vue实现简单图轮播效果

1 问题描述在用vue做页面设计时，首页经常会用到图片轮播效果，在之前讲slider滑块，那么如何用swiper滑块实现图片轮播呢？ 2 算法描述滑块视图容器。其中只

淡淡的烟草味﹌/ 2022年09月16日 08:43/ 0 赞/ 239 阅读

相关 ViewPager 无限轮播自动轮播

1、ViewPager的应用 ViewPager应用很简单，只需使用android.support.v4.view.ViewPager组件即可，同ListView一

- 日理万妓/ 2022年06月08日 00:11/ 0 赞/ 307 阅读

相关 vue中实现简单轮播效果

html： <div class="cate-main"> <div class="carousel-contain"> <

r囧r小猫/ 2022年05月22日 08:38/ 0 赞/ 275 阅读

相关 js无缝轮播效果实现，自动轮播

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构

本是古典何须时尚/ 2022年04月06日 06:13/ 0 赞/ 425 阅读

相关 UICollectionView实现无限轮播

[UICollectionView实现无限轮播][UICollectionView] \import "KGNewsController.h" \import "KG

矫情吗；*/ 2022年03月22日 10:50/ 0 赞/ 315 阅读

相关 VUE中实现MUI轮播图效果

1、配置`App.vue`文件，通过`<router-view></router-view>`加载轮播图页面 <template> <div class=

我不是女神ヾ/ 2022年02月03日 06:59/ 0 赞/ 380 阅读

相关 vue+swiper实现轮播效果一个页面放多个轮播

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

浅浅的花香味﹌/ 2022年01月28日 05:53/ 0 赞/ 1217 阅读