利用jQuery的animate实现轮播图

最新推荐文章于 2023-07-07 17:15:59 发布

sd821

最新推荐文章于 2023-07-07 17:15:59 发布

阅读量1k

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/wdijaoijosa/article/details/123309478

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		//设置样式使图片在固定div中显示
			#d1{
				width: 1300px;
				height: 280px;
				display: flex;
			}
			#OWindow{
				width: 520px;
				height: 280px;
				margin: 0 auto;
				overflow: hidden;
				display: flex;
				position: relative;
			}
			#pictureDiv{
				left: -520px;
				display: flex;
				position: absolute;
			}
			#pictureDiv>div{
				width: 520px;
				height: 280px;
			}
			#num>div{
				width: 20px;
				height: 20px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="OWindow">
				<div id="pictureDiv">
					<div style="background-image: url(img/04.jpg);">4</div>
					<div style="background-image: url(img/01.jpg);">1</div>
					<div style="background-image: url(img/02.jpg);">2</div>
					<div style="background-image: url(img/03.jpg);">3</div>
					<div style="background-image: url(img/04.jpg);">4</div>
					<div style="background-image: url(img/01.jpg);">1</div>
				</div>
			</div>
		</div>
		<div id="num" style="display: flex; margin-left: 822px;">
			<div style="background-color: pink;">1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		<button id="btnPrev" style="margin-left: 400px;">上一个</button>
		<button id="btnNext" style="margin-left: 400px;">下一个</button>
	</body>
	<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		var count=2;
		//使图片完成轮播函数
		var method1000=function(){
			$("#pictureDiv").animate({"left":-520*count+"px"},1000);
			if(count==5){
				count=2;
				$("#pictureDiv").animate({"left":"-520px"},0)
			}
			else{
				count++;
			}
			changeColor();
		}
		//完成点击下一张和上一张的图片
		var method100=function(){
			$("#pictureDiv").animate({"left":-520*count+"px"},100);
			if(count==5){
				count=2;
				$("#pictureDiv").animate({"left":"-520px"},0)
			}
			else if(count==0){
				count=5;
				$("#pictureDiv").animate({"left":"-2080px"},0)
			}
			else{
				count++;
			}
			changeColor();
		}
		//实现轮播
		var inter=setInterval(method1000,3000);
		$("#btnNext").click(function(){
			clearInterval(inter);
			method100();
			inter=setInterval(method1000,3000);
			changeColor();
		})
		$("#btnPrev").click(function(){
			clearInterval(inter);
		    if(count<2){
				count=0;
			}
			else if(count==3){
				count=1;
			}
			else{
				count-=2;
			}
			method100();
			inter=setInterval(method1000,3000);
			changeColor();
		})
		$("#num>div").click(function(){
			clearInterval(inter);
			count=$(this).index()+1;
			method100();
			inter=setInterval(method1000,3000);
			changeColor();
		})
		function changeColor(){
			$("#num>div").css("background-color","white");
			$("#num>div").eq(count-2).css("background-color","pink");
		}
	</script>
</html>

sd821

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用jQuery的animate实现轮播图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> //设置样式使图片在固定div中显示 #d1{ width: 1300px; height: 280px; display: flex; } #OWindow{ width:
复制链接

扫一扫