<!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. arcpy.mapping常用四大件-MapDocument

    arcpy.mapping常用四大件-MapDocument by 李远祥 点开arcpy.mapping的帮助,可以看到其有限的几个类,看起来东西不是很多,但却是非常的使用.由于arcpy定位就是粗 ...

  2. IIS配置步骤，绝对有用，百度上的不全面，是百度的补充

    百度教程:http://www.jb51.net/article/29787.htm 参照百度教程,但是配置不成功,关键的地方来了!! 下面的也要配置设置 1. 2. 3.C:\Windows\Sys ...

  3. PowerShell 批量修改AD属性

    环境:win 2008 R2 在管理工具中打开用于 windows powershell 的ActiveDirectory模块命令行窗口或打开命令提示符窗口输入PowerShell回车再输入impor ...

  4. iOS动画案例(2) 仿网易新闻标题动画

      由于产品的需要,做了一个和网易新闻标题类似的动画效果,现在新闻类的APP都是采用这样的动画效果,来显示更多的内容.先看一下动画效果:   由于这个动画效果在很多场合都有应用,所以我专门封装了一个控 ...

  5. [css 揭秘]：CSS揭秘 技巧（三）：背景定位

    我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...

  6. Htmlunit使用

    //模拟一个浏览器 WebClient webClient = new WebClient(); //设置webClient的相关参数 webClient.setJavaScriptEnabled(t ...

  7. devexpress实现多行表头(复合表头),附源代码

    在许多项目中都会涉及到复合表头(多行表头),这里给大家分享一个devexpress实现多重表头的案例. 1.第一步将表格类型由默认的gridview变为bandedgridview,如图所示: 2.第 ...

  8. nginx.conf完整配置实例

        #user nobody; worker_processes 1;   #error_log logs/error.log; #error_log logs/error.log notice; ...

  9. Swift_字符串详解(String)

    Swift_字符串详解(String) 类型别名 //类型别名 fileprivate func testTypeAliases() { let index = String.Index.self p ...

  10. python 写的几道题

    ''' #乘法口诀''' for i in range(1,10): for j in range(1,i+1): print("%d*%d=%2d" % (i,j,i*j),en ...