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

代码：（如果要调整整体的速度和时间请对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&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;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&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;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&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;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&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;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&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;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>