自学的前端,然而找不到工作,莫得办法。在头条发一下文章,对前端学习做一下记录,也希望能对你有点帮助。
首先,我用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样式也给一下吧!自己写的大概效果,没有考虑响应效果。
嗯......还挺乱的,后面再改进吧。