vue不操作dom实现图片轮播的示例代码


Posted in Javascript onDecember 18, 2019

本文介绍了vue不操作dom实现图片轮播的示例代码,分享给大家,具体如下:

效果

宽度为1190px且水平居中的轮播盒子;
中间是当前显示的默认尺寸图片;
左右两边是预显示的小尺寸图片;
轮播从右至左,图片逐渐放大。

vue不操作dom实现图片轮播的示例代码

做普通平滑轮播也可以参照这个思路

html

vue不操作dom实现图片轮播的示例代码

<ul>
 <li
	v-for="(demo,index) in demoList"
	:key="index"
	:class="{'demo-left':demoStyle(index) == 0,'demo-active':demoStyle(index) == 1,'demo-right':demoStyle(index) == 2}"
 >
	<img :src="demo.img" alt />
 </li>
</ul>

css

我们要写上三个li不同位置的样式和一个li默认位置的的样式。
分别是:
左边位置的dom样式;
中间位置的dom样式;
右边位置的dom样式;
默认位置的dom样式。
其中,默认的dom隐藏在中间展示的dom下面。
看图:

vue不操作dom实现图片轮播的示例代码

图中:

ul的样式:

ul {
 position: relative;
 width: 1190px;
 height: 500px;
 margin: 0 auto;
 display: flex;
}

紫色部分是默认的li的dom样式,设置在整个ul水平且垂直居中的位置

ul > li {
 position: absolute;
 width: 480px;
 min-width: 480px;
 height: 400px;
 top: 50px;
 bottom: 50px;
 left: 355px;
 font-size: 0;	/* 去除img标签留白,与轮播无关 */
 overflow: hidden;
 background: white;
 box-shadow: 0 0 10px 0 #dddddd;
 transition: 0.6s;
 z-index: 1;
}

红色部分是左边的li的dom样式,设置在整个ul水平靠左、垂直居中的位置

ul > .demo-left {
 left: 0;
 z-index: 2;
}

黑色部分是中间需要展示的li的dom样式,设置在整个ul水平靠右、垂直居中的位置

ul > .demo-active {
 width: 600px;
 min-width: 600px;
 height: 500px;
 top: 0;
 bottom: 0;
 left: 295px;
 z-index: 3;
}

蓝色部分是右边的li的dom样式,设置在整个ul水平靠右、垂直居中的位置

ul > .demo-right {
 left: 710px;
 z-index: 2;
}

图片水平且垂直居中,可自定义设置,与轮播无关

ul > li > img {
 position: absolute;
 width: 100%;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
}

vue

export default {
 name: "demo",
 data() {
	return {
	 demoList: [	// 图片列表
    {
		 id: "1",
		 src: "图片路径"
		},
		{
		 id: "2",
		 src: "图片路径"
		},
		{
		 id: "3",
		 src: "图片路径"
		},
		{
		 id: "4",
		 src: "图片路径"
		},
		{
		 id: "5",
		 src: "图片路径"
		}
	 ],
	 demoActive: 0,	// 当前显示的li下标,设置为0,表示首次加载显示第一张图片
   demoTimer: null	// 定时器,声明demoTimer方便停止轮播和重新开始![在这里插入图片描述](https://img-blog.csdnimg.cn/20191217174439432.gif)轮播
	}
 },
 methods: {
 	// 根据返回值给li添加className
 	demoStyle(index) {
   if (index == this.demoActive - 1) return 0;
   if (index == this.demoActive ) return 1;
   if (index == this.demoActive + 1) return 2;
   if (this.demoActive == 0 && index == this.demoList.length - 1) return 0;
   if (this.demoActive == this.demoList.length - 1 && index == 0) return 2;
  },
  // 轮播执行
  demoCarousel() {
   this.demoActive++;
   if (this.demoActive > this.demoList.length - 1) {
    this.demoActive= 0;
   }
  }
 },
 mounted() {
  let _self = this;
  _self.$nextTick(function () {
   // 开始轮播,3秒一次
   _self.demoTimer = setInterval(_self.demoCarousel, 3000);
  });
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
vue一步步实现alert功能
Jul 05 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
详细分析vue响应式原理
Jun 22 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
使用JS来动态操作css的几种方法
Dec 18 #Javascript
基于ts的动态接口数据配置的详解
Dec 18 #Javascript
H5实现手机拍照和选择上传功能
Dec 18 #Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 #Javascript
js实现上传图片并显示图片名称
Dec 18 #Javascript
js实现多图和单图上传显示
Dec 18 #Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 #Javascript
You might like
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
解析php中的escape函数
2013/06/29 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
vue实现登录拦截
2020/06/29 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
Python中的字符串查找操作方法总结
2016/06/27 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
开会迟到检讨书
2014/02/03 职场文书
学校元旦晚会方案
2014/02/19 职场文书
党员个人年度总结
2015/02/14 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
建议书的格式及范文
2015/09/14 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
Vue router配置与使用分析讲解
2022/12/24 Vue.js