vue实现图片切换效果

思路：

整个代码部分分为轮播图片和控制span两个部分。

按照前端工程化的需求来说，这两个部分应该解耦成两个component最后再导入页面比较合理，但由于demo较为简单，

作为练手就不搞那么复杂了。

先写出整体代码框架：

<div id="banner" class="slide" style="padding-top: 5px;"><div v-for="(item, index) in bannerList" v-show="index===mark" :key="index" class="slideShow"><a href=""><img :src="item.image" alt="" style="width: 100%; height: 2.9rem;"></a></div><div class="bor"><span v-for="(item, index) in bannerList" :class="{'actives': index===mark}" :key="index"></span></div>
</div>

我们使用v-for列表渲染两个部分，值得注意的是列表渲染最好要提供一个key值，至于为什么官方文档说得很复杂，

就我所知的是如果不加key值在使用transition-group也就是过渡效果的时候会出现bug，官方给出的建议也是尽可能

在列表渲染的时候加上key值，百利无一害，养成习惯就好。
创建定时器，每隔2s给变量mark+1，挂载到钩子函数created：

<script>
export default {  data () {  return {  mark: 0, //比对图片索引的变量  bannerList:[] }  },  methods: {  autoPlay () {  this.mark++;  if (this.mark === 3) { //当遍历到最后一张图片置零  this.mark = 0  }  },  play () {  setInterval(this.autoPlay, 2000)  },  change (i) {  this.mark = i  }  },  created () {  this.play()  }
}
</script>

加上css文件，出现基本的效果。

<style>  .slide {  width: 950px;  height: 150px;  margin: 0 auto;  margin-top: 50px;  overflow: hidden;  position: relative;  }  .slideshow {  width: 95px;  height: 150px;  }  li {  position: absolute;  }  img {  width: 95px;  height: 150px;  }  .bar {  position: absolute;  width: 100%;  bottom: 10px;  margin: 0 auto;  z-index: 10;  text-align: center;  }  .bar span {  width: 20px;  height: 5px;  border: 1px solid;  background: white;  display: inline-block;  margin-right: 10px;  }  .active {  background: #bfd6b6 !important;  }
</style>

vue实现图片切换效果相关推荐

精致3D图片切换效果，最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
android如何自定义viewpager,Android自定义ViewPager实现个性化的图片切换效果
第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开始让ViewPager来做.时间长了,ViewPager的 ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...
jQuery插件Slider Revolution实现响应动画滑动图片切换效果 2018-12-31 编程之家 https://www.jb51.cc 这是一款非常强大的内容切换插件,它基于jQuer ...
js原生带缩略图的图片切换效果
js原生带缩略图的图片切换效果本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...
click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...
用CSS3实现图片切换效果
当几个页面的整体布局相同,只有某个部分在各页面不同时,可以将整体布局的CSS样式写在同一个.css文件中.本次的CSS实现图片s是每个页面下的图片切换效果不同,除此之外,其他的效果都一样.因此,我们可 ...
html图片转换特效,css3图片切换效果
本教程将带给大家一些很酷的图片切换效果的制作方法.为了使大家看到不同的效果,我们准备了三种不同的例子:图片切换.全屏幻灯片和一些产品展示.这些效果不仅仅可以运用在幻灯片中.但在我们的例子中,都是以幻灯 ...
使用Direct3D实现如幻灯片的动态图片切换效果
上一篇文章演示了如何用GDI技术实现图片切换效果,这一篇文章给大家讲解怎么用Direct3D API实现图片动画效果. 一.Direct3D概述 Direct3D是Microsoft的DirectX软 ...

vue实现图片切换效果

vue实现图片切换效果相关推荐

最新文章

热门文章