<!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. 阿里云SSD等磁盘挂载方法（详细步骤完整版）

    1,根据提示购买一块,在阿里云管理磁盘的列表"更多"点击,选中"挂载": 2,进入远程实例(远程系统),管理-->存储-->磁盘管理,在右侧看到新挂 ...

  2. block之--- 基本使用

    block的类型:对象 官方文档描述如下 “Blocks are Objective-C objects, which means they can be added to collections l ...

  3. JavaScript 中的 this 问题总结 !

    2016-12-28 vvv阿城 JavaScript 转自  https://qiutc.me/post/this-this-this-in-javascript.html#call,_apply, ...

  4. gitHub搭建

    1.注册一个gitHub账户 2.新建立一个远程仓库(登陆进去后-->点击图标 --> New repository ) 3.跳转后,填写相关信息(仓库名称及选项) 4.在本地的文件夹里右 ...

  5. devexpress表格控件gridcontrol特殊应用（一）——实现禁用特定行（附源代码）

    一些特殊的项目中会存在一些特殊需求,如需要禁用特定行.这时候gridcontrol的一般属性是实现不了的,就需要做一些更改.这时候你就需要去devexpress官网中找寻些资料(官网https://w ...

  6. Brackets 前端编辑器试用

    Brackets编辑器介绍 "一个现代的,开源的,了解网页设计的编辑器"这是官方的宣传语.也就是说它适用于网页开发,包含了许多亮点功能:实时预览(Live Preview).内联编 ...

  7. 在Angular中，如果权限值是异步请求所得，如何将其设置为HTTP请求头的Authorization?

    遇到此问题的背景:项目需要实现单点登录,在前后端分离的前提下,前台如何保存token值成为了一个问题.想到的解决方案是,将token值统一存到一个前端程序,其他的前端程序去这个前端程序去取token( ...

  8. BOM元素之window对象

    在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.这意味着在网页中定义的任何一个对象.变量和函数,都以wi ...

  9. Java Web(十二) commons-fileupload上传下载

    今天心态正常...继续努力.. --WH 一.上传原理和代码分析. 上传:我们把需要上传的资源,发送给服务器,在服务器上保存下来. 下载:下载某一个资源时,将服务器上的该资源发送给浏览器. 难点:服务 ...

  10. 点击Robot Framework的桌面快捷图标后，没有反应（没有打开应用程序）

    http://www.cnblogs.com/zhengyihan1216/p/6397478.html  这篇文章中介绍了如何安装Robot Framework以及如何在桌面上创建快捷方式. 但是有 ...