vue 点击按钮图片左右滑动

HTML

// 添加ref 获取dom元素
<div class="four_lc" ref="_four_lc">
    // 添加ref 获取dom元素
    <img style="left: 0px;"src="lc.png" class="four_lc_img" ref="_four_lc_">
</div>
<div class="left" @click="btnLeft()">向左</div>
<div class="right" @click="btnRight()">向右</div>

CSS

// 父元素添加绝对定位
.four_lc {
      width: 100%;
      height: 123px;
      overflow: hidden;
      margin-top: 81px;
      position: relative;

     
}
// 子元素添加相对定位
 .four_lc_img {
        position: absolute;
}

vue 

methods: {
    // 点击按钮 图片向左移动
    btnLeft() {
      // 获取图片
      let img = this.$refs._four_lc_
      // 点击图片向左移动
      if (img.offsetLeft <= -(img.offsetWidth - this.$refs._four_lc.offsetWidth)) {
        img.style.left = 0 + 'px'
      } else {
        img.style.left = img.offsetLeft - img.offsetWidth / 10 + 'px'
      }
      // 添加动效
      img.style.transition = 'all 0.5s'
    },

    // 点击按钮 图片向右移动
    btnRight() {
      // 获取图片
      let img = this.$refs._four_lc_
      //  图片向右
      if (img.offsetLeft >= 0) {
        img.style.left = -(img.offsetWidth - this.$refs._four_lc.offsetWidth) + 'px'
      } else {
        img.style.left = img.offsetLeft + img.offsetWidth / 10 + 'px'
      }

      img.style.transition = 'all 0.5s'
    },
  }

最后

以上就是迷人书本为你收集整理的vue 点击按钮图片左右滑动的全部内容，希望文章能够帮你解决vue 点击按钮图片左右滑动所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。