js完成轮播图全代码

kjshuan

已于 2022-03-02 20:22:43 修改

阅读量1.8k

点赞数 1

文章标签： javascript css 前端 java jquery

于 2022-03-02 10:39:47 首次发布

本文链接：https://blog.csdn.net/just_learing/article/details/123224384

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#picd1{
				height: 500px;
				width: 500px;
				border: 1px  solid;
				position: relative;
				display: flex;
			
				margin: 0px;
				padding: 0px;
			}
			#picd1>div{
				height: 500px;
				width: 500px;
				
			}
			#d2{
				display: flex; 
				position: relative;
				width: 2000px;
				height: 500px;
				border: 1px solid black;
				background-color: pink;
			}
			#window1{
				margin: 0 auto;
				width: 500px;
				height: 500px;
				border: 0px solid;
				position: relative;
				overflow: hidden;
				}
				#biaoq{
					display: flex;
				}
				#biaoq>div{
					height: 50px;
					width: 50px;
					border: 1px red solid;
				}
		</style>
	</head>
	<body>
	 <div id="d2">
	 	<div id="window1">
			<div id="picd1">
				<div >					
					1<img src="../lunbotu/img/1.jpg" height="490" width="500"  />
				</div>
				<div>
					2<img src="../lunbotu/img/2.jpg" height="490" width="500"/>
				</div>
				<div>
					3<img src="../lunbotu/img/3.jpg" height="490" width="500"/>
				</div>
				<div>
					4<img src="../lunbotu/img/4.jpg" height="490" width="500"/>
				</div>
				<div>
					5<img src="../lunbotu/img/5.jpg" height="490" width="500"/>
				</div>
				<div>
					6<img src="../lunbotu/img/1.jpg" height="490" width="500"  />
				</div>
			</div>
		</div>
	</div>
	<div id="biaoq">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>
	<button id="but1">下一个</button>
	<button id="but2">上一个</button>
		<script type="text/javascript" src="jquery-3.6.0.min.js">
			
		</script>
		<script type="text/javascript">
		var count=1;	
		var uip=2000;
				
		var lume=function arr(){
			
			$("#picd1").animate({"left": -500*count+"px"},uip);
			changecol();
			if(count==5){
				count=0;
				$("#picd1").animate({"left": 0*count+"px"},0);
			}			
			count++;
		}
		var op1=function(){
			uip=10;
			lume();
			uip=1000;
			sl = setInterval(lume,3000);
			
		}
	
		var sl = setInterval(lume,3000);
		
		$("#but1").click(function(){
			clearInterval(sl);
			changecol();
			op1();
			
		});
		$("#but2").click(function(){
			clearInterval(sl);
			if(count<2){
				count=4
			}else if(count==2){
				count=0;
			}else{
				count=count-2;
			}
			changecol();
			op1();
		
		});
		$("#biaoq>div").click(function(){
			clearInterval(sl);
			count=$(this).index();	
			changecol();
			op1();
		})
		
			function changecol(){
			$("#biaoq>div").css("background-color","white");
			$("#biaoq>div").eq(count).css("background-color","red");
		
		}
		
		
		
										
//		function trd(){		
//			$("#d1>div").eq(1).animate({
//			"left":"1000px"
//				
//			},1000);
//				
//			$("#d1>div").eq(2).animate({
//				"left":"1000px"
//				
//			},1000);
//			
//			$("#d1>div").eq(3).animate({
//				"left":"1000px"
//				
//			},1000);
//			
//			$("#d1>div").eq(4).animate({
//				"left":"1000px"
//				
//			},1000);
//				
//						
//				$("#d1>div").each(function(i,domEle){
//				setInterval(function(){
//						
//						
//						$(domEle).animate({
//							"left":"0px"
//											})
//									},10
//				);
//					
//				$("#d1>div:eq("+ i +")").show();
//				$("#d1>div:eq(0)").show();
//		
//					
//				$("#d1>div:eq("+ (i+1) +")").animate({
//						"left":"1000px"						
//						},2000+3000*i)						
//				});
//			}
//			
//				setInterval(function(){
//					trd();
//					},1000);
					
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				height: 500px;
				width: 500px;
				border: 1px red solid;
				position: relative;
				display: flex;
				overflow: hidden;
				margin: 0px;
				padding: 0px;
			}
			div>div{
				height: 500px;
				width: 500px;
				border: 1px red ;
				position: absolute;
			}

		</style>
	</head>
	<body>
		<div id="d1">
			<div >
				<img src="../Jquerydemo1/img/1.jpg" />
			</div>
			<div>
				<img src="../Jquerydemo1/img/2.jpg"/>
			</div>
			<div>
				<img src="../Jquerydemo1/img/3.jpg"/>
			</div>
			<div>
				<img src="../Jquerydemo1/img/4.jpg"/>
			</div>
			<div>
				<img src="../Jquerydemo1/img/5.jpg"/>
			</div>
		</div>
		<script type="text/javascript" src="jquery-3.6.0.min.js">
			
		</script>
		<script type="text/javascript">
				
		
					
					
					
		function trd(){		
			$("#d1>div").eq(1).animate({
			"left":"1000px"
				
			},1000);
				
			$("#d1>div").eq(2).animate({
				"left":"1000px"
				
			},1000);
			
			$("#d1>div").eq(3).animate({
				"left":"1000px"
				
			},1000);
			
			$("#d1>div").eq(4).animate({
				"left":"1000px"
				
			},1000);
			
		
						
				$("#d1>div").each(function(i,domEle){
				setInterval(function(){
						
						
						$(domEle).animate({
							"left":"0px"
											})
									},10
				);
					
				$("#d1>div:eq("+ i +")").show();
				$("#d1>div:eq(0)").show();
		
					
				$("#d1>div:eq("+ (i+1) +")").animate({
						"left":"1000px"						
						},2000+3000*i)						
				});
			}
			
				setInterval(function(){
					trd();
					},100);
				
				
				
		

//			$("#d1>div").eq(1).animate({
//			"left":"1000px"
//				
//			},1000).hide();
//				
//			$("#d1>div").eq(2).animate({
//				"left":"1000px"
//				
//			},1000).hide();
//			
//			$("#d1>div").eq(3).animate({
//				"left":"1000px"
//				
//			},1000).hide();
//			
//			$("#d1>div").eq(4).animate({
//				"left":"1000px"
//				
//			},1000);
//			
//		
//						
//				$("#d1>div").each(function(i,domEle){
//				setInterval(function(){
//						
//						
//						$(domEle).animate({
//							"left":"0px"
//											})
//									},10
//				);
//					
//				$("#d1>div:eq("+ i +")").show();
//				$("#d1>div:eq(0)").show();
//		
//					
//				$("#d1>div:eq("+ (i+1) +")").animate({
//						"left":"1000px"						
//						},2000+3000*i)						
//				});
//			
			
			
		
		</script>
	</body>
</html>