SVG循环滑动效果

1.循环滑动图（4张)
效果图

svg滑块视频

代码：（如果要调整整体的速度和时间请对begin=“1s” dur="12s"属性进行编辑）

<section style="margin: 0px auto;display: block;width: 100%;" data-mpa-powered-by="yiban.io">
	<section style="overflow: hidden;line-height: 0;margin-top: -1px;visibility: visible;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1701" style="display: block;margin: 0px auto;visibility: visible;" width="100%">
			<g style="visibility: visible;" name="默认第一章底图">
				<foreignObject x="0" y="0" width="1080" height="1701" style="visibility: visible;"><svg style="display: block;background-image: url(https://img0.baidu.com/it/u=4274692597,1740785081&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=609);background-size: 100%;background-repeat: no-repeat;visibility: visible;" viewBox="0 0 500 609" width="100%" xmlns="http://www.w3.org/2000/svg">svg>foreignObject>
			g>
			<g style="visibility: visible;" name="第4张">
				<foreignObject x="0" y="0" width="1080" height="1701" style="visibility: visible;"><svg style="display: block;background-image: url(https://img0.baidu.com/it/u=1996830734,2605251766&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=609);background-size: 100%;background-repeat: no-repeat;visibility: visible;" viewBox="0 0 500 609" width="100%" xmlns="http://www.w3.org/2000/svg">svg>foreignObject>
				<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 0 0; 0 0;0 0; 0 0; 0 0; 0 0;-80 0;1080 0" fill="freeze" begin="1s" dur="12s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0">
				animateTransform>
			g>
			<g style="visibility: visible;" name="第3张">
				<foreignObject x="0" y="0" width="1080" height="1701" style="visibility: visible;"><svg style="display: block;background-image: url(https://img2.baidu.com/it/u=2793766631,1237398890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=609);background-size: 100%;background-repeat: no-repeat;visibility: visible;" viewBox="0 0 500 609" width="100%" xmlns="http://www.w3.org/2000/svg">svg>foreignObject>
				<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 0 0; 0 0; 0 0; 0 0; 80 0; -1080 0;-1080 0;-1080 0" fill="freeze" begin="1s" dur="12s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0">
				animateTransform>
			g>
			<g style="visibility: visible;" name="第2张">
				<foreignObject x="0" y="0" width="1080" height="1701" style="visibility: visible;"><svg style="display: block;background-image: url(https://img0.baidu.com/it/u=2790564678,3176655049&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=609);background-size: 100%;background-repeat: no-repeat;visibility: visible;" viewBox="0 0 500 609" width="100%" xmlns="http://www.w3.org/2000/svg">svg>foreignObject>
				<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 0 0; 0 0; -80 0; 1080 0; 1080 0; 1080 0;1080 0;1080 0" fill="freeze" begin="1s" dur="12s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0">
				animateTransform>
			g>
			<g style="visibility: visible;" name="第1张">
				<foreignObject x="0" y="0" width="1080" height="1701" style="visibility: visible;"><svg style="display: block;background-image: url(https://img0.baidu.com/it/u=4274692597,1740785081&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=609);background-size: 100%;background-repeat: no-repeat;visibility: visible;" viewBox="0 0 500 609" width="100%" xmlns="http://www.w3.org/2000/svg">svg>foreignObject>
				<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 80 0; -1080 0; -1080 0; -1080 0; -1080 0; -1080 0;-1080 0;-1080 0" fill="freeze" begin="1s" dur="12s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0">
				animateTransform>
			g>
		svg>section>
section>