<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body, p, img, dl, dt, dd, ul, ol, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
body { position: relative; font: 12px/1.5 Simsun, Arial; }
ul, ol { list-style: none; }
img { border: 0 none; }
input, select { vertical-align: middle; }
table { border-collapse: collapse; }
s, em, i { font-style: normal; text-decoration: none; }
a { outline: none; text-decoration: none; }
a:hover { text-decoration: underline; }
.clear { *zoom: 1; }
.clear:after { clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden; zoom: 1; }
.flip-list-enter-active, .flip-list-leave-active {
transition: all 1s;
}
.flip-list-enter, .flip-list-leave-active {
opacity: 0;
}
#app li {
position: absolute;
top: 0;
left: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> <div id="app" class="demo">
<transition-group name="flip-list" tag="ul">
<li v-for="curImg in currImgs" v-bind:key="curImg" class="list-item">
<img :src="curImg">
</li>
</transition-group>
</div> <script type="text/javascript">
new Vue({
el: '#app',
data: {
currImgs: [],
imgs: [
'https://img11.360buyimg.com/da/jfs/t4000/107/2234194410/85271/6c24d985/58a50cafNb60886c9.jpg',
'https://img20.360buyimg.com/da/jfs/t3154/175/5917485830/129679/f123634c/5897e6a2N83837dd2.jpg',
'https://img1.360buyimg.com/da/jfs/t3133/89/5984232745/66970/beaf615c/589ac9bcNe544a72e.jpg',
'https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg'
],
index: 0
},
mounted: function () {
this.currImgs = [this.imgs[0]];
this.startChange();
},
methods: {
startChange: function () {
var _this = this;
setInterval(function () {
if (_this.index < _this.imgs.length - 1) {
_this.index++
} else {
_this.index = 0
}
_this.currImgs.splice(0, 1, _this.imgs[_this.index]);
}, 2000);
}
}
})
</script>
</body>
</html>

vue渐变淡入淡出轮播图的更多相关文章

  1. js渐隐渐现透明度变化淡入淡出轮播图

    js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...

  2. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  3. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  4. jq交叉淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery淡入淡出轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. js中用面向对象的思想——淡入淡出轮播图

    首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换  3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...

  7. vue上的简单轮播图

    好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用 ...

  8. js+jq 淡入淡出轮播(点击+定时+鼠标进入移出事件)

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  9. HTML学习之轮播图

    这可以说是一种非常简单的实现轮播图的方法了,由于时间仓促所以没写自动轮播部分.简单说一下原理吧,就是把所有图片堆叠在一个盒子里,设置所有图片的透明度为0,这样就把所有图片都隐藏了,第一张图片除外(第一 ...

随机推荐

  1. vs基础:无法断点调试dll项目 无法命中

    调试vs时,经常会出现,你设置了dll项目的一些断点,可f5之后,这些断点无效.时代定制的程序组的童鞋告诉你解决方法:在解决方案上右键“属性”,点击左侧树“配置属性”-->“配置”,右侧项目列表 ...

  2. Linq 集合操作

    Linq 集合操作 演示代码 两个对象一个是Person,一个Address, AddressId是外键, public class Person { public string ID { get; ...

  3. Linux的CentOS7系统下配置LNMP

    友情提示:在执行以下操作之前,请确保您已经安装了centos7,因为以下所有操作均是在centos7下操作完成的. 1.首先要停掉本机自带的防火墙,再配置iptables,开放21/22/80/808 ...

  4. PHP递归遍历指定文件夹内的文件

    今天早上在地铁上看了关于文件和文件夹的一章,正好最近刚搞懂linux的文件系统,觉得对文件属性的访问跟Shell命令很像,所以想晚上来实践一下. 发现php的文件夹函数好像没有提供遍历文件夹下的所有文 ...

  5. RadAsm使用

    RadASM 命令行语法 DelCheck,Out,Command,F1[,F2[,Fx]]   DelCheck   执行命令前要清除的文件,不使用时设为0  Out      一般指定为O,所有信 ...

  6. .NET Core中妙用unsafe减少gc提升字符串处理性能

    一.前言 昨天在群里讨论怎么样效率的把一个字符串进行反转,一般的情况我们都知道,只要对String对象进行操作,那么就会生成新的String对象,比如"1"+"2&quo ...

  7. WPF - 监听判断键盘组合键的按下

    对于键盘事件PreviewKeyDown.PreviewKeyUp.KeyDown.KeyUp,在其中检查当次事件是哪个按键触发的很简单,只需要判断KeyEventArgs类型的事件参数e的Key属性 ...

  8. json基础入门

    json是什么? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成.它基于ECMAScript的一个子集. JSO ...

  9. Collector for ArcGIS的使用体验

    基于Esri的Portal for ArcGIS(下面简称Portal),用户可以搭建一个本地的地理信息云平台.围绕着这个云平台,Esri为不同的终端提供了响应的解决方案,其中Collector fo ...

  10. MySQL分区表的局限和限制

    禁止构建 分区表达式不支持以下几种构建: 存储过程,存储函数,UDFS或者插件 声明变量或者用户变量 可以参考分区不支持的SQL函数 算术和逻辑运算符 分区表达式支持+,-,*算术运算,但是不支持DI ...