<!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. yii2 邮件发送（有图有真相）

    经典的密码找回方案是发送邮件到用户邮箱然后修改密码,下面利用yii2 高级版的mail功能,进行邮件的发送,如下图 1.在comm/config/main-local.php中添加 'mailer' ...

  2. css3 3D变形 入门（一）

    css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...

  3. 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！

    作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...

  4. Spark源码分析之Spark Shell（上）

    终于开始看Spark源码了,先从最常用的spark-shell脚本开始吧.不要觉得一个启动脚本有什么东东,其实里面还是有很多知识点的.另外,从启动脚本入手,是寻找代码入口最简单的方法,很多开源框架,其 ...

  5. shell-早间学习，每日一点

    1.定位行: sed -n '12,~3p' pass #从第12行开始,直到下一个3的倍数行(12-15行) sed -n '12,+4p' pass #从第12行开始,连续4行(12-16行) s ...

  6. BZOJ 3924: [Zjoi2015]幻想乡战略游戏(动态点分治)

    这种动态点分治嘛,GDKOI时听打到了,也有同学讲到了,所以印象比较深刻也就想出来了,然后就在实现方面卡了好久= = 不得不说CLJ说得真的太简单了,实现方面根本没提. 首先我们可以先用树分治构建出这 ...

  7. Pro Git CN Plus

    Git — The stupid content tracker, 傻瓜内容跟踪器.Linus 是这样给我们介绍 Git 的. Git 是用于 Linux 内核开发的版本控制工具.与常用的版本控制工具 ...

  8. MySQL备份说明

    第一次发布博客,发现目录居然不会生成,后续慢慢熟悉博客园的设置.回正文--- 1 使用规范 1.1 实例级备份恢复 使用innobackupex,在业务空闲期执行,考虑到IO影响及 FLUSH TAB ...

  9. 模拟做饭系统（java+线程中的join方法）

    (一)项目框架分析 妈妈要去做饭,发现没有酱油,让儿子去买酱油,然后回来做饭. 根据面向对象的思想,有两个对象,妈妈和儿子 主要有两个方法: (一)没有线程控制(即儿子没有买酱油回来妈妈就做好饭了)+ ...

  10. 文件上传----FTP部署