jquery圆角头像图片堆叠切换

使用方法

		$(function(){
			$('.start').click(function (){
				timeInt()
			})
			$('.end').click(function (){
				clearInterval(timer)
				timer = null
			})
			let len = $('.round').length;
			for(let i = 0;i<len;i++){
				$('.round').eq(i).css('z-index',len - i)
			}
			
			// 修改此仍需改默认样式 否则默认显示和动画不匹配
			const obj = {
				width:100,//宽度
				time:2000,//毫秒
				num:3,//展示几个
				interval:20,
			}
			
			var timer;
			function timeInt(){
				timer = setInterval(() => {
					// $('.round').eq(0).css('opacity',1);
					let len = $('.round').length;
					for(let i = 0;i<len;i++){
						let num = i * obj.interval + obj.width;
						if(i== 0){//第一个
							$('.round').eq(i).css('left',obj.width + 'px').css('opacity',1);
						}else if(i == len - 1){//最后一个
							$('.round').eq(i).css('left',num+'px').css('opacity',0);
						}else if(i > obj.num){
							$('.round').eq(i).css('left',num+'px').css('opacity',0);
						}else{
							$('.round').eq(i).css('left',num+'px');
						}
					}
					var txt = document.getElementsByClassName('round')[len - 1];
					setTimeout(() => {
						$('.box').prepend(txt);
						for(let i = 0;i<len;i++){
							$('.round').eq(i).css('z-index',len - i)
						}
						$('.round').eq(0).css('left',0)
					},500)
				},obj.time)
			}
		})