图片轮播滚动效果

图片轮播滚动效果，vue3+ts,ts代码不够严谨，主要是快速完成效果展示，可以直接粘贴复制，更换图片列表，微调样式即可

	<div id="img_wrap">
		<div id="start">
			<img :src="item" alt="" v-for="(item, index) in imgList" :key="index" />
		</div>
		<div id="end"></div>
	</div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue-demi'
interface ParamsRule {
	speed: number
	MyMar: any
	start: any
	end: any
	wrap: any
}
const imgParams: ParamsRule = {
	speed: 30,
	MyMar: null,
	start: null,
	end: null,
	wrap: null,
}
onMounted(() => {
	ScrollImgLeft()
})
// 需要展示的图片列表
const imgList: Array<string> = [
	'https://preview.qiantucdn.com/58pic/36/39/88/02z58PIC7YhFN3rkx2Hi4_origin_PIC2018.jpg!qt324new_nowater',
	'https://preview.qiantucdn.com/58pic/36/08/03/42U58PICnxwk6YEHZTcsE_origin_PIC2018.jpg!qt324new_nowater',
	'https://preview.qiantucdn.com/58pic/35/21/96/97858PICsA6h32aAd3c8K_PIC2018.jpg!w580_772_nowater',
	'https://preview.qiantucdn.com/58pic/40/81/20/34G58PICNSfwwtMiEsB9v_origin_PIC2018.jpg!qt324new_nowater',
	'https://preview.qiantucdn.com/weitu/23/17/05/86858PICJmZaeWPFNcwbv_PIC2018.jpg!qt324new_nowater',
	'https://preview.qiantucdn.com/58pic/37/12/97/89F58PIC6WcNsVAZQtt3m_origin_PIC2018.jpg!qt324new_nowater',
	'https://preview.qiantucdn.com/58pic/35/16/90/46D58PICYaPS7dmNnz1xM_PIC2018.jpg!qt324new_nowater',
]
const ScrollImgLeft = (): void => {
	imgParams.speed = 30 // 图片滚动速度，数值越大，速度越慢
	imgParams.MyMar = null
	imgParams.start = document.getElementById('start')
	imgParams.end = document.getElementById('end')
	imgParams.wrap = document.getElementById('img_wrap')
	imgParams.end.innerHTML = imgParams.start!.innerHTML // 图片衔接
	imgParams.MyMar = setInterval(Marquee, imgParams.speed)
	// 鼠标移入，滚动暂停
	imgParams.wrap!.onmouseover = (): void => {
		clearInterval(imgParams.MyMar)
	}
	// 鼠标移出，滚动继续
	imgParams.wrap!.onmouseout = (): void => {
		imgParams.MyMar = setInterval(Marquee, imgParams.speed)
	}
}
// 滚动方法
const Marquee = (): void => {
	if (imgParams.end.offsetWidth - imgParams.wrap.scrollLeft <= 0)
		imgParams.wrap.scrollLeft -= imgParams.start.offsetWidth
	else imgParams.wrap.scrollLeft++
}
</script>

<style lang="less" scoped>
#img_wrap {
	margin: 5% 5%;
	width: 90%;
	height: 180px;
	overflow: hidden;
	white-space: nowrap;
	#start,
	#end {
		display: inline;
	}
	img {
		width: 200px;
		margin-right: 1%;
	}
}
</style>