js轮播

最新推荐文章于 2024-10-11 21:55:16 发布

qq_39291044

最新推荐文章于 2024-10-11 21:55:16 发布

阅读量176

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_39291044/article/details/85340641

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="jquery-3.2.1.js"></script>
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: -webkit-linear-gradient(top left,blue,red,yellow);
			}
			.carouse{
				  width: 300px;
				  height: 200px;
				  background: red;
				  position: relative;
				  transform-style: preserve-3d;
				  margin: 200px auto;
				  transition: all linear .5s;
				  
			}
			.carouse>span{
				position: absolute;
				display: inline-block;
				width: 300px;
				height: 200px;
				overflow:hidden;
				-webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.5));
			}
			.carouse>span>img{
				width: 300px;
				height: 200px;
				overflow:hidden;
			}
			.carouse:hover{
				transform: rotateX(89deg);
			}
		</style>
	</head>
	<body>
		<div class="carouse" id="div1">
			
		</div>
	</body>
</html>
<script>
	var num=0;
	function test(){  
		num++;
		$("#div1").css("transform","rotateY("+num*60+"deg)")
	}
	$(function(){
		  for(var i=0;i<6;i++){
		  	    var tag=$("<span><img src='"+i+".jpg'/></span>");
		  	       tag.css("transform","rotateY("+i*60+"deg) translateZ(260px)");
		  	    $("div").append(tag);
		  }
		  var num=0;
		 
		  setInterval("test()",2000);
		 // $("div").click(function(){
		  	//   num++;
		  	//   $(this).css("transform","rotateY("+num*60+"deg)")
		 // })
		
	})
</script>