JS轮播动画

一、最终呈现例子

二、页面元素 

<div class="content">
    <div id="box0"></div>
	<div id="box1"></div>
	<div id="box2"></div>
</div>

三、样式部分

<style>
			.content {
				position: relative;
			}

			div[id^=box] {
				width: 150px;
				height: 80px;
				background: cadetblue;
				margin: 10px;
				position: absolute;
				transition: all 0.5s;
			}

			div#box0 {
				background: brown;
				top: 150px;
				left: 0;
				z-index: 3;
			}

			div#box1 {
				background: cornflowerblue;
				top: 80px;
				left: 140px;
				z-index: 2;
			}

			div#box2 {
				background: darkmagenta;
				top: 10px;
				left: 30px;
				z-index: 1;
			}

			.front0 {
				width: 150px !important;
				height: 80px !important;
				top: 150px !important;
				left: 0 !important;
				z-index: 3 !important;
			}

			.front1 {
				width: 120px !important;
				height: 60px !important;
				top: 75px !important;
				left: 140px !important;
				z-index: 2 !important;
			}

			.front2 {
				width: 90px !important;
				height: 40px !important;
				top: 20px !important;
				left: 30px !important;
				z-index: 1 !important;
			}
</style>

四、JS部分

<script src="./js/jquery.min.js"></script>
<script type="text/javascript">
			$(document).ready(() => {
				const count = 3;
				let interval = null;
				let cur = 0;

				function turnCircle() {
					if (cur == 0) {
						$("#box0").attr('class', 'front0')
						$("#box1").attr('class', 'front1')
						$("#box2").attr('class', 'front2')
					}
					if (cur == 1) {
						$("#box0").attr('class', 'front2')
						$("#box1").attr('class', 'front0')
						$("#box2").attr('class', 'front1')
					}
					if (cur == 2) {
						$("#box0").attr('class', 'front1')
						$("#box1").attr('class', 'front2')
						$("#box2").attr('class', 'front0')
					}
					setTimeout(() => {
						console.log(333)
						if (cur < 2) {
							cur++
						} else {
							cur = 0
						}
					}, 40)
				}
				interval = setInterval(() => {
					turnCircle()
					console.log(222)
				}, 800)
				
				
				$("div[id^=box]").hover(() => {
					$(this).attr('class', '')
					clearInterval(interval)
					interval = null;
				}, () => {
					interval = setInterval(() => {
						turnCircle()
					}, 800)
				})
			})
		</script>

还有需要改进的地方