<!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. windows visual studio 2015安装

    下载 首先到微软官方下载在线安装文件 https://www.microsoft.com 运行安装 点击运行后选择 自定义 选择安装功能,把sql server去掉,是数据库插件 点击下一步,中途会提 ...

  2. PHP基础学习

    PHP基础学习 <?php //类型 $test=123; var_dump($test);//打印出类型和数值 echo '<hr/>'; echo gettype($test); ...

  3. ajax提交File文件

    <script type="text/javascript">    $(function() {        $("input[name='image'] ...

  4. React Native填坑之旅 -- 使用iOS原生视图（高德地图）

    在开发React Native的App的时候,你会遇到很多情况是原生的视图组件已经开发好了的.有的是系统的SDK提供的,有的是第三方试图组件,总之你的APP可以直接使用的原生视图是很多的.React ...

  5. sicily 1063. Who's the Boss 排序+递推

    #include <cstdio> #include <algorithm> using namespace std; struct Emp{ int id, salary, ...

  6. Mixin模式：带实现的协议

    Mixin(织入)模式并不是GOF的<设计模式>归纳中的一种,但是在各种语言以及框架都会发现该模式(或者思想)的一些应用.简单来说,Mixin是带有全部实现或者部分实现的接口,其主要作用是 ...

  7. Android中Handler使用浅析

    1. Handler使用引出 现在作为客户,有这样一个需求,当打开Activity界面时,开始倒计时,倒计时结束后跳转新的界面(思维活跃的朋友可能立马想到如果打开后自动倒计时,就类似于各个APP的欢迎 ...

  8. Unity播放Gif动画

    Unity目前对图形图像的支持还不是很完善,支持的图形文件格式有 PSD, TIFF, JPG, TGA, PNG, GIF, BMP, IFF, PICT等,但却不支持Gif动画.但是经过查阅资料发 ...

  9. （原创）我对未来的人类的发展，以及AI技术发展的一些思考。

    最近AI非常的火,不仅仅是阿尔法狗的成功,因为它击败了人类最强的大脑,颠覆了人类几千年来的对传统的认识,也让人类意识 到了一个问题:天外有天,人外有AI. 那么AI究竟会对人类的未来造成什么深远的影响 ...

  10. java算法 蓝桥杯（题+答案） 压缩变换

    10.压缩变换  (程序设计) 小明最近在研究压缩算法.他知道,压缩的时候如果能够使得数值很小,就能通过熵编码得到较高的压缩比.然而,要使数值很小是一个挑战. 最近,小明需要压缩一些正整数的序列,这些 ...