Vue를 사용하여 이미지 캐러셀을 구현하는 방법

이번에는 Vue를 사용하여 이미지 캐러셀을 구현하는 방법과 Vue를 사용하여 이미지 캐러셀을 구현하는 경우 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

저는 진지하게 컴포넌트를 작성한 적이 없습니다. 이전에는 비즈니스 코드를 작성할 때 항상 다른 사람들이 패키지한 컴포넌트를 사용했는데, 이번에는 잘 알려진 Carousel 컴포넌트만큼 좋지는 않지만 기본적으로 기능은 완벽합니다. 이 컴포넌트를 작성하는 과정에서 많은 것을 배웠고, 누락된 부분이 있으면 바로잡아주세요!

이 컴포넌트를 만들기 전에 캐러셀에 대한 많은 기사를 검색한 결과 캐러셀을 구현하는 아이디어는 다르지만 실제로는 큰 논리는 동일하다는 사실을 발견했습니다. 이 기사는 주로 포커스 캐러셀 이미지의 특수 효과를 기반으로 합니다. MOOC 온라인 강의에 있지만 MOOC는 주로 네이티브 JS로 작성되었으며, 저자는 Vue를 사용하여 이를 재구성하고 일부 수정했습니다. 완성된 컴포넌트 렌더링은 다음과 같습니다.

1. 아이디어를 명확하게 하고 요구 사항과 원칙을 이해합니다.

1. 어떤 종류의 캐러셀을 작성하고 싶나요?

• 오른쪽 화살표를 클릭하면 사진이 왼쪽으로 슬라이드되어 다음 사진으로 이동합니다. 왼쪽 화살표를 클릭하면 사진이 오른쪽으로 슬라이드되어 다음 사진으로 넘어갑니다.

• 클릭 아래의 작은 점을 슬라이드하여 해당 그림에 있는 작은 점의 스타일도 변경됩니다

• 전환 효과를 적용하려면 천천히 슬라이드하세요

• 그림 위에 마우스를 올리면 캐러셀이 일시 중지됩니다. , 그리고 마우스가 떠나도 캐러셀은 계속됩니다

• 자동 재생 기능

• 무한 스크롤, 즉 마지막 사진으로 스크롤할 때 다음 사진을 클릭하면 계속해서 왼쪽으로 슬라이드됩니다 첫 번째 그림으로 당기는 대신 여기서는 조금 어렵습니다.

2. 무한 캐러셀의 원리를 이해하세요.

먼저 회로도를 살펴보겠습니다.

사진의 빨간색 선 부분이 우리가 보는 사진입니다. 이 캐러셀에는 사진이 5개만 표시되어 있는데, 시작과 끝 부분에 사진 5가 앞에 배치되고, 뒤에 사진 1이 배치됩니다. 그림 5. 그 이유는 무한 스크롤을 구현하기 위함이다. 무한 스크롤의 원리는 전체 그림이 오른쪽 그림 5까지 왼쪽으로 스크롤되면 그림 1로 계속해서 앞으로 이동합니다. 그림 1이 완전히 표시되면 빠른 속도로 오른쪽으로 뒤로 당겨집니다. 육안으로는 보이지 않습니다. 가장 왼쪽의 그림 1로 이동하세요. 이렇게 왼쪽으로 슬라이드해도 그림 2가 나옵니다.

아래와 같이: 마지막 사진 1이 전환을 완료하고 완전히 표시되면 전체 목록이 즉시 오른쪽으로 당겨져 왼쪽의 사진 1로 이동됩니다. 그림 5의 다른 경계 맵의 스크롤링도 동일하지만 방향이 반대입니다.

2. 먼저 사진을 바꾸자

1. 레이아웃 및 준비

<template>
 <p>
  </p>
<p>  // window上图中红线框
   </p>
<ul> //注意这里的:style //这是图片列表，排成一排
    <li> //列表最前面的辅助图，它和图5一样，用于无限滚动
     <img  src="/static/imghwm/default1.png" data-src="sliders[sliders.length - 1].img" class="lazy" alt="Vue를 사용하여 이미지 캐러셀을 구현하는 방법" >
    </li>
    <li> //通过v-for渲染的需要展示的5张图
     <img  src="/static/imghwm/default1.png" data-src="item.img" class="lazy" alt="Vue를 사용하여 이미지 캐러셀을 구현하는 방법" >
    </li>
    <li> //列表最后面的辅助图，它和图1一样，用于无限滚动
     <img  src="/static/imghwm/default1.png" data-src="sliders[0].img" class="lazy" alt="Vue를 사용하여 이미지 캐러셀을 구현하는 방법" >
    </li>
   </ul>
   <ul> //两侧的箭头
    <li>
     <svg><path></path></svg>     
    </li>
    <li>
     <svg><path></path></svg>     
    </li>
   </ul>
   <ul> //下面的小圆点
    <li>
    </li>
   </ul>
  
 
</template>
<script>
export default {
 name: &#39;slider&#39;,
 data () {
  return {
   sliders:[
    {
     img:&#39;../../static/images/1.jpg&#39;
    },
    {
     img:&#39;../../static/images/2.jpg&#39;
    },
    {
     img:&#39;../../static/images/3.jpg&#39;
    },
    {
     img:&#39;../../static/images/4.jpg&#39;
    },
    {
     img:&#39;../../static/images/5.jpg&#39;
    }
   ],
   currentIndex:1,
   distance:-600
  }
 },
 computed:{
  containerStyle() { //这里用了计算属性，用transform来移动整个图片列表
   return {
    transform:`translate3d(${this.distance}px, 0, 0)`
   }
  }
 }
}
</script>

자, 레이아웃은 대략 이렇고, 렌더링은 이렇습니다

위의 코드는 주석을 달았으며 여기에 몇 가지 사항을 언급하겠습니다.

• window는 너비가 600px인 빨간색 선 프레임입니다. 움직이는 것은 이미지를 감싸는 컨테이너입니다. is: style="containerStyle", 이것은 계산된 속성입니다. 왼쪽 및 오른쪽 이동을 제어하려면 변환:translate3d(${this.distance, 0, 0})를 사용하세요.

• 거리의 데이터와 currentIndex가 키, 거리입니다. 이동 거리를 제어합니다. 기본값은 -600이며, 7개의 사진 중 두 번째 사진인 사진 1을 표시합니다. currentIndex는 창에 표시되는 그림의 인덱스입니다. 여기서 기본값은 7개의 그림 중 두 번째 그림이기도 합니다.

• 표시해야 할 그림은 5개뿐이지만 그림 5는 그림 1 앞에 배치되고 그림 1은 그림 5 뒤에 배치되어 무한 스크롤이 가능하다는 원리는 앞에서 언급한 바 있습니다. 오른쪽을 클릭하면 측면의 화살표를 클릭하면 컨테이너가 왼쪽으로 이동하고 거리가 점점 작아집니다. 왼쪽의 화살표를 클릭하면 컨테이너가 오른쪽으로 이동하며 거리가 줄어듭니다. 점점 더 커지는 방향으로 실수하지 마세요

2. 图片切换

我们在左侧和右侧的箭头上添加点击事件：

    
•                
    
•                
   

   ......    methods:{       move(offset, direction) {         this.distance += this.distance * direction         if (this.distance  -600) this.distance = -3000       }    }

解释下上面的代码：点击左侧或者右侧的箭头，调用move函数，move接收偏移量offset和方向direction两个参数。direction只传两个值，1表示container向右移动，-1表示container向左移动；偏移量是600，也就是一张图片的宽度。如果移动到7张图片的最后一张，就把container拉到7张图片里的第二张；如果移动到7张图片里第一张，就把container拉到7张图片里的第5张。

效果：

 

可以看到，图片切换效果已经出来了，但是下面的小圆点没有跟着变换。接下来我们把这个效果加上。从上面的html代码可以看到， :class="{dotted: i === (currentIndex - 1)}" ，小圆点的切换效果和data里的currentIndex值相关，我们只要随着图片切换变动currentIndex值就可以了。

修改move方法里的代码：

......

move(offset, direction) {
  direction === -1 ? this.currentIndex++ : this.currentIndex--
  if (this.currentIndex > 5) this.currentIndex = 1
  if (this.currentIndex  -600) this.distance = -3000
  }

上面的添加的三行代码很好理解，如果是点击右侧箭头，container就是向左移动， this.currentIndex 就是减1，反之就是加1。

效果：

 

可以看到，小圆点的切换效果已经出来了。

三、过渡动画

上面的代码已经实现了切换，但是没有动画效果，显的非常生硬，接下来就是给每个图片的切换过程添加过渡效果。

这个轮播组件笔者并没有使用Vue自带的class钩子，也没有直接使用css的transition属性，而是用慕课网原作者讲的setTimeout方法加递归来实现。

其实我也试过使用Vue的钩子，但是总有一些小问题解决不掉；比如下面找到的这个例子：例子

这个例子在过渡的边界上有一些问题，我也遇到了，而且还是时有时无。而如果使用css的transition过渡方法，在处理边界的无限滚动上总会在chrome浏览器上有一下闪动，即使添加了 -webkit-transform-style:preserve-3d; 和 -webkit-backface-visibility:hidden 也还是没用，而且要配合transition的 transitionend 事件对于IE浏览器的支持也不怎么好。

如果大家有看到更好的办法，请在评论中留言哦~

下面我们来写这个过渡效果，主要是改写：

methods:{
  move(offset, direction) {
    direction === -1 ? this.currentIndex++ : this.currentIndex--
    if (this.currentIndex > 5) this.currentIndex = 1
    if (this.currentIndex  this.distance)) {
      this.distance += 30 * direc    
      window.setTimeout(() => {
        this.animate(des, direc)
      }, 20)
    } else {
      this.distance = des
      if (des  -600) this.distance = -3000
   }
  }
}

上面的代码是这个轮播我觉得最麻烦、也是最难理解的地方。

来理解一下：首先，我们对于move方法进行了改写，因为要一点点的移动，所以要先算出要移动到的目标距离。然后，我们写一个animate函数来实现这个过渡。这个animate函数接收两个参数，一个是要移动到的距离，另一个是方向。 如果我们点击了右侧的箭头，container要向左侧移动，要是没有移动到目标距离，就在 this.distance 减去一定的距离，如果减去后还是没有到达，在20毫米以后再调用这个 this.animate ，如此不断移动，就形成了过渡效果。而如果移动到了目标距离，那就将目标距离赋值给 this.distance ，然后再进行边界和无限滚动的判断。

当然，使用 window.setInterval() 也可以实现这个效果，而且会稍微好理解一点，因为没有用到递归：

methods:{
  move(offset, direction) {
    direction === -1 ? this.currentIndex++ : this.currentIndex--
    if (this.currentIndex > 5) this.currentIndex = 1
    if (this.currentIndex  {
      if ((direc === -1 && des  this.distance)) {
        this.distance += 30 * direc
      } else {
        window.clearInterval(temp)
        this.distance = des
        if (des  -600) this.distance = -3000
      }
    }, 20)
  } 
}

实现出来的效果如下：

 

四、简单节流一下

写到这里，效果是出来了，但是会有一点问题，如果多次快速点击，就会有可能出现下面这种情况：

 

出现这种情况的原因很简单，因为是使用定时器过渡，所以连续快速点击就会出现错乱，简单节流一下就好了： 在过渡完成之前点击箭头无效，其实就是设了一个闸，第一次点击把闸打开，在闸再次打开之前，让一部分代码无法执行，然后再在恰当的时机把闸打开。

我们把这个闸设在move函数里：

move(offset, direction) {
  if (!this.transitionEnd) return //这里是闸
  this.transitionEnd = false    //开闸以后再把闸关上
  direction === -1 ? this.currentIndex++ : this.currentIndex--
  if (this.currentIndex > 5) this.currentIndex = 1
  if (this.currentIndex <p style="text-align: left;">this.transitionEnd 是这个闸的钥匙，我们把它放到data里：</p><p style="text-align: left;">this.transitionEnd: true</p><p style="text-align: left;">这个闸一开始默认的状态是开着的，第一次点击以后，这个闸就关上了， this.tranisitonEnd = false ，在再次打开之前，后面的代码都执行不了。接下来就是在恰当的时机把这个闸打开，而这个恰当的时机就是过渡完成时，也就是在 animate函数 里：</p><pre class="brush:php;toolbar:false">animate(des, direc) {
  if (this.temp) { 
    window.clearInterval(this.temp)
    this.temp = null 
  }
  this.temp = window.setInterval(() => {
    if ((direc === -1 && des  this.distance)) {
     this.distance += 30 * direc 
    } else {
     this.transitionEnd = true   //闸再次打开
     window.clearInterval(this.temp)
     this.distance = des
     if (des  -600) this.distance = -3000
    }
  }, 20)
}

这下快速点击就没有之前的那个问题了：

 

五、点击小圆点实现图片过渡切换

到目前为止的代码：

<template>
 <p>
  </p>
<p>
   </p>
<ul>
    <li>
     <img  src="/static/imghwm/default1.png" data-src="sliders[sliders.length - 1].img" class="lazy" alt="Vue를 사용하여 이미지 캐러셀을 구현하는 방법" >
    </li>
    <li>
     <img  src="/static/imghwm/default1.png" data-src="item.img" class="lazy" alt="Vue를 사용하여 이미지 캐러셀을 구현하는 방법" >
    </li>
    <li>
     <img  src="/static/imghwm/default1.png" data-src="sliders[0].img" class="lazy" alt="Vue를 사용하여 이미지 캐러셀을 구현하는 방법" >
    </li>
   </ul>
   <ul>
    <li>
     <svg><path></path></svg>     
    </li>
    <li>
     <svg><path></path></svg>     
    </li>
   </ul>
   <ul>
    <li>
    </li>
   </ul>
  
 
</template>
<script>
export default {
 name: &#39;slider&#39;,
 data () {
  return {
   sliders:[
    {
     img:&#39;../../static/images/1.jpg&#39;
    },
    {
     img:&#39;../../static/images/2.jpg&#39;
    },
    {
     img:&#39;../../static/images/3.jpg&#39;
    },
    {
     img:&#39;../../static/images/4.jpg&#39;
    },
    {
     img:&#39;../../static/images/5.jpg&#39;
    }
   ],
   currentIndex:1,
   distance:-600,
   transitionEnd: true
  }
 },
 computed:{
  containerStyle() {
   return {
    transform:`translate3d(${this.distance}px, 0, 0)`
   }
  }
 },
 methods:{
  move(offset, direction) {
   if (!this.transitionEnd) return
   this.transitionEnd = false
   direction === -1 ? this.currentIndex++ : this.currentIndex--
   if (this.currentIndex > 5) this.currentIndex = 1
   if (this.currentIndex < 1) this.currentIndex = 5
   const destination = this.distance + offset * direction
   this.animate(destination, direction)
  },
  animate(des, direc) {
   if (this.temp) { 
    window.clearInterval(this.temp)
    this.temp = null 
   }
   this.temp = window.setInterval(() => {
    if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
     this.distance += 30 * direc
    } else {
     this.transitionEnd = true
     window.clearInterval(this.temp)
     this.distance = des
     if (des < -3000) this.distance = -600
     if (des > -600) this.distance = -3000
    }
   }, 20)
  }
 }
}
</script>

接下来我们要实现点击下面的小圆点来实现过渡和图片切换。

  
•   

在点击小圆点的时候我们调用 jump 函数，并将索引 i+1 传给它。 这里需要特别注意，小圆点的索引和图片对应的索引不一致，图片共7张，而5个小圆点对应的是图片中中间的5张，所以我们才传 i+1 。

jump(index) {
  const direction = index - this.currentIndex >= 0 ? -1 : 1 //获取滑动方向 
  const offset = Math.abs(index - this.currentIndex) * 600  //获取滑动距离
  this.move(offset, direction)
}

上面的代码有一个问题，在jump函数里调用move方法，move里对于currentIndex的都是 +1 ，而点击小圆点可能是将 currentIndex 加或者减好多个，所以要对move里的代码修改下：

direction === -1 ? this.currentIndex += offset/600 : this.currentIndex -= offset/600

改一行，根据offset算出currentIndex就行了。

但是又有一个问题，长距离切换速度太慢，如下：

 

所以我们需要控制一下速度，让滑动一张图片耗费的时间和滑动多张图片耗费的时间一样，给move和animate函数添加一个speed参数，还要再算一下：

jump(index) {
  const direction = index - this.currentIndex >= 0 ? -1 : 1
  const offset = Math.abs(index - this.currentIndex) * 600
  const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed 
  this.move(offset, direction, jumpSpeed)
}

六、自动播放与暂停

前面的写的差不多了，到这里就非常简单了，写一个函数play：

play() {
  if (this.timer) {
    window.clearInterval(this.timer)
    this.timer = null
  }
  this.timer = window.setInterval(() => {
    this.move(600, -1, this.speed)
  }, 4000)
}

除了初始化以后自动播放，还要通过mouseover和mouseleave来控制暂停与播放：

stop() {
  window.clearInterval(this.timer)
  this.timer = null
}

七、 两处小坑

1. window.onblur 和 window.onfocus

写到这里，基本功能都差不多了。但是如果把页面切换到别的页面，导致轮播图所在页面失焦，过一段时间再切回来会发现轮播狂转。原因是页面失焦以后，setInterval停止运行，但是如果切回来就会一次性把该走的一次性走完。解决的方法也很简单，当页面失焦时停止轮播，页面聚焦时开始轮播。

window.onblur = function() { this.stop() }.bind(this)
window.onfocus = function() { this.play() }.bind(this)

2. window.setInterval() 小坑

当定时器 window.setInterval() 在多个异步回调中使用时，就有可能在某种机率下开启多个执行队列， 所以为了保险起见，不仅应该在该清除时清除定时器，还要在每次使用之前也清除一遍 。

八、用props简单写两个对外接口

props: {
  initialSpeed: {
   type: Number,
   default: 30
  },
  initialInterval: {
   type: Number,
   default: 4
  }
},
data() {
  ......
  speed: this.initialSpeed  
},
computed:{
  interval() {
    return this.initialInterval * 1000
  }
}

然后再在相应的地方修改下就可以了。

完整的代码如下：

<template>
 <p>
  </p>
<p>
   </p>
<ul>
    <li>
     <img  src="/static/imghwm/default1.png" data-src="sliders[sliders.length - 1].img" class="lazy" alt="Vue를 사용하여 이미지 캐러셀을 구현하는 방법" >
    </li>
    <li>
     <img  src="/static/imghwm/default1.png" data-src="item.img" class="lazy" alt="Vue를 사용하여 이미지 캐러셀을 구현하는 방법" >
    </li>
    <li>
     <img  src="/static/imghwm/default1.png" data-src="sliders[0].img" class="lazy" alt="Vue를 사용하여 이미지 캐러셀을 구현하는 방법" >
    </li>
   </ul>
   <ul>
    <li>
     <svg><path></path></svg>     
    </li>
    <li>
     <svg><path></path></svg>     
    </li>
   </ul>
   <ul>
    <li>
    </li>
   </ul>
  
 
</template>
<script>
export default {
 name: &#39;slider&#39;,
 props: {
  initialSpeed: {
   type: Number,
   default: 30
  },
  initialInterval: {
   type: Number,
   default: 4
  }
 },
 data () {
  return {
   sliders:[
    {
     img:&#39;../../static/images/1.jpg&#39;
    },
    {
     img:&#39;../../static/images/2.jpg&#39;
    },
    {
     img:&#39;../../static/images/3.jpg&#39;
    },
    {
     img:&#39;../../static/images/4.jpg&#39;
    },
    {
     img:&#39;../../static/images/5.jpg&#39;
    }
   ],
   currentIndex:1,
   distance:-600,
   transitionEnd: true,
   speed: this.initialSpeed
  }
 },
 computed:{
  containerStyle() {
   return {
    transform:`translate3d(${this.distance}px, 0, 0)`
   }
  },
  interval() {
   return this.initialInterval * 1000
  }
 },
 mounted() {
  this.init()
 },
 methods:{
  init() {
   this.play()
   window.onblur = function() { this.stop() }.bind(this)
   window.onfocus = function() { this.play() }.bind(this)
  },
  move(offset, direction, speed) {
   if (!this.transitionEnd) return
   this.transitionEnd = false
   direction === -1 ? this.currentIndex += offset/600 : this.currentIndex -= offset/600
   if (this.currentIndex > 5) this.currentIndex = 1
   if (this.currentIndex < 1) this.currentIndex = 5
   const destination = this.distance + offset * direction
   this.animate(destination, direction, speed)
  },
  animate(des, direc, speed) {
   if (this.temp) { 
    window.clearInterval(this.temp)
    this.temp = null 
   }
   this.temp = window.setInterval(() => {
    if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
     this.distance += speed * direc
    } else {
     this.transitionEnd = true
     window.clearInterval(this.temp)
     this.distance = des
     if (des < -3000) this.distance = -600
     if (des > -600) this.distance = -3000
    }
   }, 20)
  },
  jump(index) {
   const direction = index - this.currentIndex >= 0 ? -1 : 1
   const offset = Math.abs(index - this.currentIndex) * 600
   const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed 
   this.move(offset, direction, jumpSpeed)
  },
  play() {
   if (this.timer) {
    window.clearInterval(this.timer)
    this.timer = null
   }
   this.timer = window.setInterval(() => {
    this.move(600, -1, this.speed)
   }, this.interval)
  },
  stop() {
   window.clearInterval(this.timer)
   this.timer = null
  }
 }
}
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用Bootstrap+WebUploader

使用iScroll做出网页内容滚动

위 내용은 Vue를 사용하여 이미지 캐러셀을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!