vue 는 dom 을 조작 하지 않 고 그림 윤 방 을 실현 하 는 예시 코드

본 고 는 vue 가 dom 을 조작 하지 않 고 그림 윤 방 을 실현 하 는 예시 코드 를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
효과.
너비 가 1190 px 이 고 수평 이 중간 에 있 는 라운드 박스;
중간 은 현재 표 시 된 기본 크기 그림 입 니 다.
좌우 양쪽 은 미리 표 시 된 작은 사이즈 의 그림 입 니 다.
번갈아 방송 하면 서 오른쪽 에서 왼쪽으로 그림 이 점점 확대 되 었 다.

보통 부 드 러 운 윤 방 을 해도 이 생각 을 참조 할 수 있 습 니 다.
html

<ul>
 <li
	v-for="(demo,index) in demoList"
	:key="index"
	:class="{'demo-left':demoStyle(index) == 0,'demo-active':demoStyle(index) == 1,'demo-right':demoStyle(index) == 2}"
 >
	<img :src="demo.img" alt />
 </li>
</ul>

css
우 리 는 li 의 서로 다른 위치 스타일 과 li 의 기본 위치 스타일 을 세 개 적어 야 합 니 다.
각각:
왼쪽 위치 dom 스타일;
중간 위치의 dom 스타일;
오른쪽 위치의 dom 스타일;
기본 위치의 dom 스타일 입 니 다.
그 중에서 기본 dom 은 중간 에 보 여 주 는 dom 아래 에 숨겨 져 있 습 니 다.
그림 보기:

그림 에서:
얼 의 스타일:

ul {
 position: relative;
 width: 1190px;
 height: 500px;
 margin: 0 auto;
 display: flex;
}

보라색 부분 은 기본 li 의 dom 스타일 로 전체 l 수준 과 수직 가운데 위치 에 설정 합 니 다.

ul > li {
 position: absolute;
 width: 480px;
 min-width: 480px;
 height: 400px;
 top: 50px;
 bottom: 50px;
 left: 355px;
 font-size: 0;	/*   img    ，      */
 overflow: hidden;
 background: white;
 box-shadow: 0 0 10px 0 #dddddd;
 transition: 0.6s;
 z-index: 1;
}

빨간색 부분 은 왼쪽 li 의 dom 스타일 로 전체 l 수평 왼쪽,수직 가운데 위치 에 설정 합 니 다.

ul > .demo-left {
 left: 0;
 z-index: 2;
}

검은색 부분 은 중간 에 보 여 줘 야 할 li 의 dom 스타일 로 전체 l 수준 에서 오른쪽,수직 으로 가운데 에 있 는 위치 에 설정 합 니 다.

ul > .demo-active {
 width: 600px;
 min-width: 600px;
 height: 500px;
 top: 0;
 bottom: 0;
 left: 295px;
 z-index: 3;
}

파란색 부분 은 오른쪽 li 의 dom 스타일 로 전체 l 수준 이 오른쪽,수직 가운데 에 있 는 위치 에 설정 합 니 다.

ul > .demo-right {
 left: 710px;
 z-index: 2;
}

그림 이 수평 이 고 수직 으로 가운데 에 있 으 며,사용자 정의 설정 이 가능 하 며,라운드 방송 과 무관 합 니 다.

ul > li > img {
 position: absolute;
 width: 100%;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
}

vue

export default {
 name: "demo",
 data() {
	return {
	 demoList: [	//     
    {
		 id: "1",
		 src: "    "
		},
		{
		 id: "2",
		 src: "    "
		},
		{
		 id: "3",
		 src: "    "
		},
		{
		 id: "4",
		 src: "    "
		},
		{
		 id: "5",
		 src: "    "
		}
	 ],
	 demoActive: 0,	//      li  ，   0，             
   demoTimer: null	//    ，  demoTimer           ![         ](https://img-blog.csdnimg.cn/20191217174439432.gif)  
	}
 },
 methods: {
 	//       li  className
 	demoStyle(index) {
   if (index == this.demoActive - 1) return 0;
   if (index == this.demoActive ) return 1;
   if (index == this.demoActive + 1) return 2;
   if (this.demoActive == 0 && index == this.demoList.length - 1) return 0;
   if (this.demoActive == this.demoList.length - 1 && index == 0) return 2;
  },
  //     
  demoCarousel() {
   this.demoActive++;
   if (this.demoActive > this.demoList.length - 1) {
    this.demoActive= 0;
   }
  }
 },
 mounted() {
  let _self = this;
  _self.$nextTick(function () {
   //     ，3   
   _self.demoTimer = setInterval(_self.demoCarousel, 3000);
  });
 }
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.