css:

<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.clearfix {
content: '';
clear: both;
display: block;
}
.carousel {
width: 500px;
height: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slide {
width: 500px;
height: 300px;
}
li {
position: absolute
}
img {
width: 500px;
height: 300px;
}
.bullet {
width: 100%;
position: absolute;
bottom: 10px;
margin: 0 auto;
text-align: center;
z-index: 10;
}
span {
width: 20px;
height: 5px;
border: 1px solid;
background: white;
display: inline-block;
margin-right: 10px;
}
.active {
background: red;
}
.image-enter-active {
transform: translateX(0);
transition: all 1s ease;
}
.image-leave-active {
transform: translateX(-100%);
transition: all 1s ease;
}
.image-enter {
transform: translateX(100%)
}
.image-leave {
transform: translateX(0)
}
</style>

html:

<div class="carousel">
<transition-group tag='ul' class="clearfix slide" name='image'>
<li v-for='(image,index) in img' :key='index' v-show='index===mark'>
<a><img :src="data:image"></a>
</li>
</transition-group>

<div class="bullet">
<span v-for='(item,index) in img.length' :class="{'active':index===mark}" @click='change(index)'></span>
</div>

</div>

js:

new Vue({
el: '.carousel',
data: {
mark: 0,
timer: null,
img: ['//upload-images.jianshu.io/upload_images/3360875-5625658440cb542d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
'//upload-images.jianshu.io/upload_images/3360875-b70e9d81d26e2a27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
'//upload-images.jianshu.io/upload_images/3360875-dc724649454c2ddc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
'//upload-images.jianshu.io/upload_images/3360875-d2148a1bb7ea9d21.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
]
},
created() {
this.play()
},
methods: {
change(i) {
this.mark = i
},
autoPlay() {
this.mark++
if (this.mark === 4) {
this.mark = 0
return
}
},
play() {
setInterval(this.autoPlay, 3000)
}
}
})

Vuejs实现轮播图的更多相关文章

  1. [vuejs短文]使用vue-transition制作小小轮播图

    提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使 ...

  2. JavaScript面向对象的方式开发轮播图插件

    轮播图是很多页面必不可少的组件.这里来使用面向对象方式开发一个插件.减去开发的痛楚 首先需要寻找对象:只有一个对象,轮播图!关键点在于找到这个对象所拥有的属性以及方法,通过代码实现出来,这是面向对象最 ...

  3. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  4. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  5. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  6. CSS-用伪类制作小箭头(轮播图的左右切换btn)

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  7. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  8. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  9. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

随机推荐

  1. 20165306 实验二 Java面向对象程序设计

    实验二 Java面向对象程序设计 实验要求 1.提交最后三个JUnit测试用例(正常情况,错误情况,边界情况)都通过的截图,截图上要有画图加水印,输入自己的学号.本提交点考查JUnit会不会使用,测试 ...

  2. http与https的区别以及https如何保证数据传输安全

    http是应用层协议,它会将要传输的数据以明文的方式给传输层,这样显然不安全.https则是在应用层与传输层之间又加了一层,该层遵守SSL/TLS协议,用于数据加密. **加密的方式有两种: 对称加密 ...

  3. 【SQL Prompt】SQL Prompt7.2下载及破解教程

    基本介绍 SQL Prompt能根据数据库的对象名称,语法和用户编写的代码片段自动进行检索,智能的为用户提供唯一合适的代码选择.自动脚本设置为用户提供了简单的代码易读性--这在开发者使用的是不大熟悉的 ...

  4. 字符串GZIP压缩解压

    c# /// <summary> /// 字符串压缩解压 /// </summary> public class Zipper { public static string C ...

  5. 设计模式(三)Singleton Pattern单例设计模式

    1.饿汉式 public class SingletonDemo { private static SingletonDemo s=new SingletonDemo(); private Singl ...

  6. python return dict bug?

    def to_dict(self): para = OrdererDict() para['dd'] = self.XXX ... return para 这样一个简单函数 para1 = obj.t ...

  7. angular2 脏检查机制

    https://www.waitig.com/angular2-%E8%84%8F%E6%A3%80%E6%9F%A5%E8%BF%87%E7%A8%8B.html https://zhuanlan. ...

  8. C#读取Excel表格的数据

    1.创建工程后,需要下载 EPPlus.dll 添加到工程中,这里有一个下载地址:https://download.csdn.net/download/myunity/10784634 2.下面仅实现 ...

  9. pdf can't copy text 无法复制文字

    有些 pdf 是通过图片弄出来的,或者被 protect 了. 我们会无法 copy 里面的字. 这个时候可以用 OCR (Optical character recognition) 就是从图片中识 ...

  10. Linux下计划任务以及crontab权限问题

    在Linux工作环境下,我们有时可能会需要在未来某个时间执行某个命令或脚本,但是我们又不可能定个闹钟,然后到点了再去执行吧,这多麻烦.还好我们的Linux系统这么强大,提供了任务计划这个功能,我们就不 ...