<!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. mybatis 关于时间的问题与技巧

    oracle:     此执行是在oracle下! 关于日期和时间的问题,date只有日期   timestamp 带有时分秒 一  #号取值     1.date         insert in ...

  2. PCB信号集

    每一个进程都有一个pcb进程控制块,用来控制进程的信息,同时信号在pcb中有两个队列去维护他,一个是未决信号集,每一位对应一个信号的状态,0,1,1表示未决态,另一个是信号屏蔽字(阻塞信号集),也就0 ...

  3. 自己用到的相关Linux命令，谨以记录

    1.查看磁盘使用情况 df -h(方便看些) df -l(字节大小,不方便看) 2.查看根目录下文件/文件夹大小 du -sh /*(/*表示根目录下所有文件) 3.查看文件列表时显示文件大小 ll ...

  4. JS事件流理解

    事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字. 事件是javaScript和DOM之间的桥梁. 你若触发,我便执行--事件发生,调用它的处理函数执行相 ...

  5. Transport (VMDB) error -44: Message

     关于点击电源按钮的时候出现了这情况Transport (VMDB) error -44: Message.   虚拟机有个服务没开.开始菜单--运行--services.msc 回车   找到VMw ...

  6. pod install 报错

    更新pod出现如下警告 The `SmartCloud_TS [Debug]` target overrides the `GCC_PREPROCESSOR_DEFINITIONS` build se ...

  7. 【转】构建基于CXF的WebService服务

    构建基于CXF的WebService服务 Apache CXF = Celtix+ XFire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了,以下简称为 CXF.C ...

  8. Java多线程——深入重入锁ReentrantLock

    简述 ReentrantLock 是一个可重入的互斥(/独占)锁,又称为“独占锁”. ReentrantLock通过自定义队列同步器(AQS-AbstractQueuedSychronized,是实现 ...

  9. Hibernate一对一主键映射

    Hibernate一对一主键映射                        ------------------------------                            -- ...

  10. 一个想法照进现实-《IT连》创业项目：万事开头难

    前言: 之前是一个想法,现在已经进入创业阶段,所以这个系列的标题,改了. 众筹的事在今天也停止了. 7-9号会在深圳龙岗布吉参加一个风投对接的活动,今晚(6号)会出发. 因为:在深圳会呆几天,而且这个 ...