vue3实现图片跟视频混着轮播

html 复制代码

<div
						style="height: 100%; display: flex"
						class="carousels"
						:style="`width:${widthas}px`"
					>
						<div
							v-for="(item, index) in carousel"
							:key="index"
							:class="`center ${clasA}`"
							:style="`width:${widtha}px;margin-left:${
								index == 0 ? marginL : '0px'
							}`"
						>
							<img
								v-if="item.type === 'img'"
								:src="item.content"
								alt=""
								style="width: 100%; height: 100%; object-fit: contain"
							/>
							<video
								v-else
								:src="item.content"
								style="width: 100%; height: 100%; object-fit: contain"
								controls
							></video>
						</div>

javascript 复制代码

const carousel = ref<
	{
		type: string;
		content: string;
		time: number;
	}[]
>([
	{
		type: 'img',
		content:
			'https://img.zcool.cn/community/01a3ec5c2eee61a80121df90c10c9b.jpg@1280w_1l_2o_100sh.jpg',
		time: 2000,
	},
	{
		type: 'img',
		content: 'https://pic3.zhimg.com/v2-a5ce347e0efb63a27b67c6ab46e59e12_r.jpg',
		time: 2000,
	},
	{
		type: 'img',
		content:
			'https://img.zcool.cn/community/0180b26248f6f50002c4212c521a70.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100',
		time: 2000,
	},
	{
		type: 'img',
		content: 'https://img.zcool.cn/community/02wacol7aokntr9snsdiyh3833.jpg',
		time: 2000,
	},
	{
		type: 'video',
		content: mi1474df5w5snjkh,
		time: 4000,
	},
	{
		type: 'img',
		content:
			'https://img.zcool.cn/community/01a3ec5c2eee61a80121df90c10c9b.jpg@1280w_1l_2o_100sh.jpg',
		time: 2000,
	},
]);

javascript 复制代码

const widthas = ref(0);
const widtha = ref(0);
const cast = () => {
	let Dom = document
		.getElementsByClassName('slideshow')[0]
		.getBoundingClientRect();
	let a = Dom.width;
	widtha.value = a;
	let b = 0;
	let c = document.getElementsByClassName('single');
	for (let i = 0; i < c.length; i++) {
		b += a;
	}
	widthas.value = a * carousel.value.length;
	loginout(a, 0);
};
setTimeout(() => {
	cast();
}, 1000);
const marginL = ref('0px');
function loginout(wid: number, num: number) {
	let data = carousel.value[num].time + 1000;
	clasA.value = 'a';
	if (num == carousel.value.length - 1) {
		clasA.value = 'single';
		marginL.value = -wid * num + 'px';
		data = 1000;
	} else if (num == 0) {
		marginL.value = 0 + 'px';
		data = carousel.value[num].time;
	} else {
		clasA.value = 'single';
		marginL.value = -wid * num + 'px';
	}
	setTimeout(() => {
		if (num + 1 >= carousel.value.length) {
			num = 0;
		} else {
			num = num + 1;
		}
		loginout(wid, num);
	}, data);
}

css 复制代码

.single {
			transition: all 1s ease-in-out;
		}

唯一的缺点就是：切换的时候非常卡顿，因为使用的是transition不是animation

尝试方案：1：使用animation

结果：动画只会在第一次动的时候生效不生效，如果次数设置为无线的话就会一直来回切换

2：使用多个动画

结果：每个div都分配到了动画但是统一时间执行完（中间夹杂着视频没办法动态延缓执行时间）

如果有哪位解决了麻烦说下