uniapp小程序图片横向滚动，无限循环，跑马灯效果，鼠标悬浮停止。无需组件，非swiper单屏滚动，仅CSS+html

效果图：

DOM

<view class="quees">
    <!--实际数据组 GO-->
	<view class="quee" v-for="item,index in marqueeList" :key="index" @click="goPage(item)">
		<image :src="item.img" mode="aspectFill"></image>
	</view>

     <!--填充数据组 GO-->
	<view class="quee" v-for="item,index in marqueeList" :key="index" @click="goPage(item)">
		<image :src="item.img" mode="aspectFill"></image>
	</view>
</view>

JS

    	data() {
			return {
				marqueeList: [{
					img: 'https://www.zeropo.com/commonimg/400_400.jpg',
					link: '/pages/index/index'
				}, {
					img: 'https://www.zeropo.com/commonimg/400_400.jpg',
					link: '/pages/index/index'
				}, {
					img: 'https://www.zeropo.com/commonimg/400_400.jpg',
					link: '/pages/index/index'
				}]
			}
		}

        /**methods*/
             //支持底部tab跳转，支持常规跳转
			goPage(item) {
				var pages = getCurrentPages();
				var page = (pages[pages.length - 1]).$page.fullPath;
				if (item.link == page) return
				uni.switchTab({
					url: item.link,
					fail(err) {
						uni.navigateTo({
							url: item.link
						})
					}
				})
			},

CSS

	.quees {
		animation: move 7s linear infinite;
		white-space: nowrap;
		margin-top: 20rpx;

		.quee {
			width: 300rpx;
			height: 300rpx;
			overflow: hidden;
			border-radius: 12rpx;
			display: inline-block;
			margin-right: 20rpx;
			image{
				width: 300rpx;
				height: 300rpx;
			}
		}
	}

	.quees:hover {
		animation: move 7s linear infinite paused;
	}

	@keyframes move {

		0% {
			transform: translateX(0rpx);
		}

		100% {
            //无缝重点：图片是300rpx，margin-right是20rpx，那就是需要左移 （300+20）*图片数rpx
			transform: translateX(-960rpx);
		}

	}

??@keyframes中 执行到100%的时候，transform: translateX(移动距离);
无缝重点：图片是300rpx，margin-right是20rpx，那就是需要左移 （300+20）*图片数rpx

该写法缺点：

如果鼠标点击跳转后，回来它还是被:hover的状态.所以会不动，点其他空白区会再次移动。

也可以在当前页面onload的时候 清除元素的hover效果，具体有大佬帮忙优化下吧。