<!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. NAT详解

    1.为什么出现了NAT? IP地址只有32位,最多只有42.9亿个地址,还要去掉保留地址.组播地址,能用的地址只有36亿左右,但是当下有数以万亿的主机,没有这么多IP地址怎么办,后面有了IPv6,但是 ...

  2. 设置tableView的分割线填满cell的方式总结

    方式一:cell的底部添加一个UIView 1.在tableViewController的viewDidLoad中取消系统的分割线 // 取消系统的分割线 self.tableView.separat ...

  3. jquery实现显示和隐藏toggle（）方法的使用

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 配置IIS Express以便通过IP地址访问调试的网站

    问题背景 最近使用C#编写了一个WebService,希望通过Java进行调用.使用Visual Studio 2013调试WebService时,可以在浏览器中通过localhost地址访问WSDL ...

  5. android学习4——View的长宽问题

    画形状的时间经常会用到点的坐标,这时原点O的位置就非常重要.在像素为1280*720的设备上画一条直线.代码如下所示: import android.app.Activity; import andr ...

  6. WP8.1程序开发中，如何加载本地文件资源或安装在程序包中的资源。

    Web 要访问来自 Web 的文件,你可以使用标准的绝对 HTTP URI: <img src="http://www.contoso.com/images/logo.png" ...

  7. 使用Nuget管理dll

    前言 nuget 已经不是什么新东西,它是vs的一个扩展工具,可以让我们在项目中添加.删除.更新引用变得更加快捷方便.现在有许多传统公司对dll的管理还是很落后的,有些甚至时通过发送dll文件,这样做 ...

  8. Android Monkey压力测试介绍

    monkey:通过Monkey程序模拟用户触摸屏幕.滑动Trackball. 按键等操作来对设备上的程序进行压力测试,检测程序多久的时间会发生异常. Monkey的构架 Monkey的参数 Monke ...

  9. Ognl值栈对象及struts标签

    用户每次访问struts的action,都会创建一个Action对象.值栈对象.ActionContext对象:然后把Action对象放入值栈中: 最后再把值栈对象放入request中,传入jsp页面 ...

  10. JAVA包名、类名、变量名命名规则

    类名:首字母大写,其他单词中首字母大写,其他小写; 方法名:首字母小写,其他单词中首字母大写,其他小写: 变量:首字母小写,其他单词中首字母大写,其他小写: 包名:全部小写