<!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;}

        #app li {

            position: absolute;

            left: 0;

            top: 0;

        }

    </style>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

    <ul>

        <li v-for="img in imgs" :key="img"><img :src="img"></li>

    </ul>

</div>

<script type="text/javascript">

    new Vue({

        el: '#app',

        data: {

            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'

            ]

        },

        mounted: function () {

            this.startChange();

        },

        methods: {

            startChange: function () {

                setInterval(this.next, 2000);

            },

            next: function () {

                this.imgs.push(this.imgs.shift());

            }

        }

    })

</script>

</body>

</html>

vue简易轮播图的更多相关文章

  1. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  2. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  3. vue自定义轮播图组件 swiper

    1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...

  4. 原生js一行代码实现简易轮播图

    这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...

  5. vue+mui轮播图

    mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...

  6. vue项目轮播图的实现

    利用   Vue-Awesome-Swiper插件来做轮播效果,github地址:https://github.com/surmon-china/vue-awesome-swiper 安装 npm i ...

  7. vue中轮播图的实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 简易轮播图、内含定时器。熟练JS操作

    HTML部分: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF ...

  9. JQuery简易轮播图

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

随机推荐

  1. windows visual studio 2015安装

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

  2. （原）SQL Server 系统提供功能的三个疑惑

    本文目录列表: 1.SQL Server系统提供的部分疑惑概述2.系统函数调用时DEFAULT代替可选参数使用不统一3.队列字段列message_enqueue_time记录的是UTC日期时间 4.@ ...

  3. vb是如何连接数据库的

    vb是如何连接数据库的         刚开始学习数据库时 ,对数据库很不了解,尤其是模块中的代码.照着抄都有很多错的,每一句到底是什么意思呢,根本不懂.于是我就花费了大量的时间去查每一句代码的具体作 ...

  4. IOS9.0 之后友盟分享详细过程

    一: 申请友盟的AppKey(友盟的Key是根据应用的名称生成的!) 在友盟注册了你自己的开发者账号后就可以申请AppKey了.然后在这个方法里面设置Key - (BOOL)application:( ...

  5. 自己动手系列——实现一个简单的LinkedList

    LinkedList与ArrayList都是List接口的具体实现类.LinkedList与ArrayList在功能上也是大体一致,但是因为两者具体的实现方式不一致,所以在进行一些相同操作的时候,其效 ...

  6. Boost.Hana在visual studio 2017 rc中的残缺使用

    最新的visual studio还不支持hana,不知道vs2017正式版本出后会不会支持.等不及了,先用rc版试试吧. 1.从https://github.com/boostorg/hana下载或拉 ...

  7. VS2015中VB.NET类(dLL)里下载并读取文件

    最近要从一个http上下载个文件,差点就直接telnet了,突然发现了这个: My.Computer.Network.DownloadFile("目标文件网址") 但是还得读取它, ...

  8. [Hadoop] - 自定义Mapreduce InputFormat&OutputFormat

    在MR程序的开发过程中,经常会遇到输入数据不是HDFS或者数据输出目的地不是HDFS的,MapReduce的设计已经考虑到这种情况,它为我们提供了两个组建,只需要我们自定义适合的InputFormat ...

  9. 3D Touch开发

    一.3d Touch 官方文档介绍 1.A user can now press your Home screen icon to immediately access functionality p ...

  10. Linux实战教学笔记18:linux三剑客之awk精讲

    Linux三剑客之awk精讲(基础与进阶) 标签(空格分隔): Linux实战教学笔记-陈思齐 快捷跳转目录: * 第1章:awk基础入门 * 1.1:awk简介 * 1.2:学完awk你可以掌握: ...