css轮播图_在vue中撸一个简单的轮播图

自学的前端，然而找不到工作，莫得办法。在头条发一下文章，对前端学习做一下记录，也希望能对你有点帮助。

首先，我用vue-cli搭的环境，不想麻烦的可以直接导入vue.js 然后自己做相应修改。思路是，用Vue提供的v-for指令循环输出需要轮播的图片，利用v-show指令控制图片的显示与否，尝试做的是爱奇艺网页端的轮播图的效果。所以具体效果可以看爱奇艺的网页。直接上html部分代码-

这里我们不做滑动的轮播图，只是简单的轮换显示图片。这一效果依赖的是--

 v-for="(item, index) of list" v-show="number===index"第10和11行的代码，当number===index的时候，这张图片就会显示，其他图片隐藏。如果不知道v-show是什么意思，可以看Vue的官方文档先复习一下。好吧结合数据看一下可能会清晰点。继续上图--

如图第43行中的number初始值为0，就是说index===0的图片会显示，而其他的index值图片会隐藏，所以我们要实现轮播效果，就要对number值下手了，让让它周期递增，然后轮播到最后一张图后再归0，继续循环。

mounted中设置循环this.timer=setInterval(this.autoPlay,2000) ,每两秒执行一次autoPlay方法autoPlay方法中，让number值自增，当number值等于最后一张图片的index值的时候，归零。这样循环效果就出来了。

list的数据样式也看一下吧，大概是这个样子的--

css样式也给一下吧！自己写的大概效果，没有考虑响应效果。

嗯......还挺乱的，后面再改进吧。