图片抖动轮播

最新推荐文章于 2023-07-20 18:16:47 发布

spfLinux

最新推荐文章于 2023-07-20 18:16:47 发布

阅读量582

点赞数

分类专栏： js css jQuery 文章标签： JS 图片抖动轮播

js 同时被 3 个专栏收录

137 篇文章 3 订阅

订阅专栏

css

45 篇文章 0 订阅

订阅专栏

jQuery

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#d1 {
			position: absolute;
			width:1000px; 
			height:400px;
			top: 50px;
			overflow: hidden;
		}
		#d1>div{
			background: url(img/banner2.png);
			position: absolute;
			top: 0px;
			width: 100px;
			height: 400px;
		}
		#d1>div:nth-child(2){
			left: 0px;
			background-position: 0px 0px;
		}
		#d1>div:nth-child(3){
			left: 100px;
			background-position: -100px 0px;
		}
		#d1>div:nth-child(4){
			left: 200px;
			background-position: -200px 0px;
		}
		#d1>div:nth-child(5){
			left: 300px;
			background-position: -300px 0px;
		}
		#d1>div:nth-child(6){
			left: 400px;
			background-position: -400px 0px;
		}
		#d1>div:nth-child(7){
			left: 500px;
			background-position: -500px 0px;
		}
		#d1>div:nth-child(8){
			left: 600px;
			background-position: -600px 0px;
		}
		#d1>div:nth-child(9){
			left: 700px;
			background-position: -700px 0px;
		}
		#d1>div:nth-child(10){
			left: 800px;
			background-position: -800px 0px;
		}
		#d1>div:nth-child(11){
			left: 900px;
			background-position: -900px 0px;
		}
		.shake{
			animation: move .5s linear;
		}
		
		@keyframes move{
			0%{
				top: 0px;
			}
			20%{
				top: -40px;
			}
			40%{
				top: 50px;
			}
			60%{
				top: -20px;
			}
			80%{
				top: 15px;
			}
			100%{
				top: 0px;
			}
		}
	</style>
</head>
<body>
	<div id="d1">
		<img src="img/banner1.png" alt="">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

	<script src="js/jquery.min.js"></script>
	<script>
		(()=>{
			var i=1,canShake=true;
			function shake(){
				if(canShake==true){
					canShake=false;
					if(i==4) i=1;
					else i++;

					var arr=[0,1,2,3,4,5,6,7,8,9];
					arr.sort((a,b)=>Math.random()<0.5?1:-1);
					arr.sort((a,b)=>Math.random()<0.5?1:-1);
					arr.sort((a,b)=>Math.random()<0.5?1:-1);

					var j=0;
					setInterval(()=>{
						$(`#d1>div:eq(${arr[j++]})`).css(
							"backgroundImage",
							`url(img/banner${i}.png)`
						).addClass("shake");
					},50);
					setTimeout(()=>{
						$("#d1>div").removeClass("shake");
						$("#box>img").attr("src",`img/banner${i}.png`);
						canShake=true;
					},1000);
				}
			}
			setInterval(shake,3000);
		})()
	</script>
</body>
</html>

参考网址：http://ahava520.cn/

spfLinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片抖动轮播

Document #d1 { position: absolute; width:1000px; height:400px; top: 50px; overflow: hidden; } #d1>div{ background: url(img/banner2.png); position: absolute; top: 0px;
复制链接

扫一扫

专栏目录