vue上的简单轮播图
好久没写轮播图了,今天在vue上写了个超简单的,效果还ok。
.moveLeft{position:relative;right:ZOOMpx;transition:all 1s;}
原理是滚动时利用.moveLeft向左移动一个格子,造成滚动的假象,此时第二张图在第一个格子的位置;
这时候把第一个格子 li 的元素摘下接到 ul 末尾,并马上撤掉.moveLeft。每张图都在自己的格子上。
定时器循环该操作,一直轮播。可以用touch事件添加touchmove左右滑动效果和切换图片的功能,就不赘述了。一个针对移动端的demo在github:https://alanknightly.github.io/ex/index.html#/
HTML:
<ul id="post_u">
<li class="post_i" v-for="pic in postset" :key="pic.id" :class="{moveLeft:moveLeft}">
<img :src="pic.src" alt="" >
</li>
</ul>
JS:
mounted(){
this.loaded();
},
data () {
return {
postset:[{src:"./src/img/1.jpg",id:"1"},{src:"./src/img/2.jpg",id:"2"},{src:"./src/img/13.png",id:"3"},{src:"./src/img/4.jpg",id:"4"}], moveLeft:false };
},
methods:{
loaded () {
var vm=this;
var run = function() { vm.moveLeft=true;
setTimeout(function(){
vm.postset.push(vm.postset.shift());
vm.moveLeft=false;
setTimeout(function(){
run();
},5000);
1 },5000) }
setTimeout(function(){
run();
},1000)
}
}
CSS:
#post_u{ //position:relative;
width:400%;
height:100%;
overflow:hidden;
.post_i{
position:relative;
right:0%;
width:25%;
height:100%;
overflow:hidden;
float:left;
display:inline-block;
}
}
#post_u .post_i.moveLeft{
position:relative;
transition:right 1s;
right:25%;
}
vue上的简单轮播图的更多相关文章
- JS---案例:简单轮播图
案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...
- 手把手原生js简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- (新手向)基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- js写的简单轮播图
这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...
- 原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 原生js写简单轮播图方式1-从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
- 用jquery制作的简单轮播图
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
- javascript简单轮播图
**轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片.其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果.** HTML布局和内容: 1.容器c ...
- JavaScript实现简单轮播图动画
运行效果: 源代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&quo ...
随机推荐
- Web性能优化之-深入理解TCP Socket
什么是Socket? 大家都用电脑上网,当我们访问运维社区https://www.unixhot.com的时候,我们的电脑和运维社区的服务器就会创建一条Socket,我们称之为网络套接字.那么既 ...
- java 8 Stream中操作类型和peek的使用
目录 简介 中间操作和终止操作 peek 结论 java 8 Stream中操作类型和peek的使用 简介 java 8 stream作为流式操作有两种操作类型,中间操作和终止操作.这两种有什么区别呢 ...
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- FluentAspects -- 基于 Fluent API 的 Aop
FluentAspects -- 基于 Fluent API 的 Aop Intro 上次我们做了一个简单的 AOP 实现示例,但是实现起来主要是基于 Attribute 来做的,对于代码的侵入性太强 ...
- NLP入门之语音模型原理
这一篇文章其实是参考了很多篇文章之后写出的一篇对于语言模型的一篇科普文,目的是希望大家可以对于语言模型有着更好地理解,从而在接下来的NLP学习中可以更顺利的学习. 1:传统的语音识别方法: 这里我们讲 ...
- 腾讯技术工程 | 基于Prophet的时间序列预测
预测未来永远是一件让人兴奋而又神奇的事.为此,人们研究了许多时间序列预测模型.然而,大部分的时间序列模型都因为预测的问题过于复杂而效果不理想.这是因为时间序列预测不光需要大量的统计知识,更重要的是它需 ...
- 上传组件Fine Uploader在ASP.NET中的应用
现如今,世面上流行着许多前端上传组件,例如:Uploadify(http://www.uploadify.com/),Fine Uploader,等等.这篇博客从头开始,介绍如何在ASP.NET MV ...
- 阿里云函数计算上部署.NET Core 3.1
使用阿里云ECS或者其他常见的VPS服务部署应用的时候,需要手动配置环境,并且监测ECS的行为,做补丁之类的,搞得有点复杂.好在很多云厂商(阿里云.Azure等)提供了Serverless服务,借助于 ...
- P1620 漂亮字串
\(核心思路就是分情况讨论\) 从整体上对题目进行分析,此题共有三种情况: (1)0 有一方为0,则结果为另一方的max: 两方都为0,则结果为0: (2)一方多,另一方不够用,满足\((contx+ ...
- Z - New Year Tree CodeForces - 620E 线段树 区间种类 bitset
Z - New Year Tree CodeForces - 620E 这个题目还没有写,先想想思路,我觉得这个题目应该可以用bitset, 首先这个肯定是用dfs序把这个树转化成线段树,也就是二叉树 ...