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 获取网页参数系统
Jul 19 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
使用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 实现页面静态化的几种方法
2017/07/23 PHP
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python Requests安装与简单运用
2016/04/07 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python函数参数操作详解
2018/08/03 Python
python实现排序算法解析
2018/09/08 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Flask-WTF表单的使用方法
2019/07/12 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
基于python实现复制文件并重命名
2020/09/16 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
学生励志演讲稿
2014/01/06 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
企业安全生产规章制度
2015/08/06 职场文书
给校长的建议书作文300字
2015/09/14 职场文书