vue渐变淡入淡出轮播图
<!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渐变淡入淡出轮播图的更多相关文章
- js渐隐渐现透明度变化淡入淡出轮播图
js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- jq交叉淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery淡入淡出轮播图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js中用面向对象的思想——淡入淡出轮播图
首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换 3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...
- vue上的简单轮播图
好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用 ...
- js+jq 淡入淡出轮播(点击+定时+鼠标进入移出事件)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- HTML学习之轮播图
这可以说是一种非常简单的实现轮播图的方法了,由于时间仓促所以没写自动轮播部分.简单说一下原理吧,就是把所有图片堆叠在一个盒子里,设置所有图片的透明度为0,这样就把所有图片都隐藏了,第一张图片除外(第一 ...
随机推荐
- PHP接入芝麻信用续。
前面,做好了,PHP查询芝麻信用. 客户又要求说,芝麻官方,发来邮件,还需要提交网站的数据给芝麻, 就是说接入芝麻SDK,还有一步,就是数据反馈. 大概芝麻分就是根据这些反馈的数据来计算的吧. 不多说 ...
- swift 可选类型笔记
晚上十一点半了,看书累了,原本想睡了的,想了想,还是把刚看的总结一下,把这篇笔记写了吧.广州下雨,真特么的冷..好了,废话不说了,说正题说说Swift可选类型. 先定义一个变量: var string ...
- oracle 游标的使用
额,一直提起游标就头疼,总感觉是很高大上的东西,望而却步... 今天要做的东西涉及到了实时更新数据,要用到JOB 存储过程 游标 通过在网上查资料,请教同事,也开始继续深入oracle,,,,小菜啊 ...
- React 国际化
前言 React 做国际化,我推荐使用 React-intl , 这个库提供了 React 组件和Api两种方式来格式化日期,数字和字符串等.知道这个库了,那让我们开始使用它 组件用法 为了和Reac ...
- [Spark] - Spark部署安装
环境:centos6.0 虚拟机 搭建单机版本的spark 前提条件:搭建好hadoop环境 1. 下载scala进行安装 只需要设置环境变量SCALA_HOME和PATH即可 export SCAL ...
- GAME(A)性能测试过程模型
- 单线程JavaScript
最近在阅读<你不知道的JavaScript中卷>,当我看到第二部分介绍异步和回调函数的一些知识时,由于该书在第二部分1.2章对线程.事件循环的概念介绍的并非详细,因此引发了我的一系列思考. ...
- 新手学js的效果图1---( 淘宝等商城货物查看特效)
本人结合之前所学一起写了,多个特效,只是新手自己瞎鼓捣的,思路清晰,具体实现的货物放大镜等,替换当中的img地址就可以查看特效 <!DOCTYPE html> <html lang= ...
- JS实例——间歇循环滚动
间歇滚动:滚动一行后,延迟2秒后继续滚动 具体实现代码如下: <!doctype html> <html lang="en"> <head> & ...
- 一个web应用的诞生(7)--结构调整
现在所有的Py代码均写在default.py文件中,很明显这种方法下,一旦程序变的负责,那么无论对于开发和维护来说,都会带来很多问题. Flask框架并不强制要求项目使用特定的组织结构,所以这里使用的 ...