Front-end——jQuery实现轮播图（按钮按下跳转）

最新推荐文章于 2021-08-22 15:43:29 发布

Star星屹程序设计

最新推荐文章于 2021-08-22 15:43:29 发布

阅读量585

点赞数

分类专栏： HTML+CSS+JS+jQuery+Vue+XML

本文链接：https://blog.csdn.net/weixin_42067873/article/details/112465988

版权

HTML+CSS+JS+jQuery+Vue+XML 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

本案例思路：

利用ul li标签实现圆点按钮，按动具体按钮，使得对应索引的图片跳转出来

使用到：

index()函数：在多个统计标签匹配的情况下，获取对应元素的下标
siblings('标签')：根据需求匹配出兄弟元素
eq(index)函数：当jquerydDom可以匹配到多个的时候，用eq()函数来取出具体第几个，索引从0开始
$(this)：代表当前操作的DOM对象（用于可以匹配到多个，如果需要获取具体的dom时使用）
opacity：设置标签背景的透明度（0~1），区别于rgba()设置法的是，opacity用于设置标签背景及文字、图片等透明，而rgba()方法仅用于设置背景透明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#app{
				height: 692px;
				width: 690px;
				border: 2px solid #000000;
				margin: 50px auto;
				position: relative;
			}
			 #app>div{
				 height: 100%;
				 width: 100%;
				 position: absolute;
				 top: 0;
				 left: 0;
				 opacity: 0;
			 }
			 
			#app>#btn{
				position: absolute;	
				right: 10px;
				bottom: 20px;
			}
			
			#btn>li{
				width: 14px;
				height: 14px;
				float: left;
				list-style: none;
				margin: 0 5px;
				border: 2px solid #FFFFFF;
				border-radius: 7px;
				background: #7F7F7F;
			}
			
			#btn>li:hover{
				border: 2px solid #7F7F7F;
				background: #FFFFFF;
			}
			 
			 #app>div:nth-child(1) {
			 	background: url(img/1.jpg);
				opacity: 1;
			 }
			 
			 #app>div:nth-child(2) {
			 	background: url(img/2.jpg);
			 }
			 
			 #app>div:nth-child(3) {
			 	background: url(img/3.jpg);
			 }
			 
			 #app>div:nth-child(4) {
			 	background: url(img/4.jpg);
			 }
			 
			 #app>div:nth-child(5) {
			 	background: url(img/5.jpg);
			 }
			 #app>div:nth-child(6) {
			 	background: url(img/6.jpg);
			 }
			
		</style>
	</head>
	<body>
		<div id="app">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			
			<ul id="btn">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		<script>
			$(function(){
				$("#app>#btn>li").click(function(){
					let index = $(this).index()
					$("#app>div").eq(index).css({opacity: '1'}).siblings('div').css({opacity: '0'})
				})
			})
		</script>
	</body>
</html>

效果图：

加入图片自动轮播功能：（使用到定时器函数）

使用到：

setInterval(function，间隔时间)：这个函数设置的是间隔时间，会不断的执行
setTimeout(function，延时时间)：这个函数设置延时函数是为了在过后的某一时刻执行一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			@keyframes myFadeIn{
				from{
					left: 750px;
				}
				to{
					left: 0px;
				}
			}
			@-webkit-keyframes myFadeIn{
				from{
					left: 750px;
				}
				to{
					left: 0px;
				}
			}
			@-moz-keyframes myFadeIn{
				from{
					left: 750px;
				}
				to{
					left: 0px;
				}
			}
			@-o-keyframes myFadeIn{
				from{
					left: 750px;
				}
				to{
					left: 0px;
				}
			}
			
			@keyframes myFadeOut{
				from{
					left: 0px;
				}
				to{
					left: -750px;
				}
			}
			@-webkit-keyframes myFadeOut{
				from{
					left: 0px;
				}
				to{
					left: -750px;
				}
			}
			@-moz-keyframes myFadeOut{
				from{
					left: 0px;
				}
				to{
					left: -750px;
				}
			}
			@-o-keyframes myFadeOut{
				from{
					left: 0px;
				}
				to{
					left: -750px;
				}
			}
			
			#app>.show{
				animation: myFadeIn 1s linear forwards;
				-webkit-animation: myFadeIn 1s linear forwards;
				-moz-animation: myFadeIn 1s linear forwards;
				-o-animation: myFadeIn 1s linear forwards;
			}
			
			#app>.hide{
				animation: myFadeOut 1s linear forwards;
				-webkit-animation: myFadeOut 1s linear forwards;
				-moz-animation: myFadeOut 1s linear forwards;
				-o-animation: myFadeOut 1s linear forwards;
			}
			
			#app{
				width: 750px;
				height: 500px;
				border: 2px solid #0000FF;
				position: absolute;
				top: calc((100vh - 500px) / 2);
				left: calc((100vw - 750px) / 2);
				overflow: hidden;
			}
			#app>div{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0px;
			}
			
			#app>.btn{
				position: absolute;
				right: 20px;
				bottom: 15px;
			}
			
			.btn>li{
				width: 20px;
				height: 20px;
				border-radius: 10px;
				border:2px solid #FFFFFF;
				background: #7F7F7F;
				float: left;
				list-style: none;
				margin: 0px 5px;
			}
			.btn>li:hover{
				border-color: #7F7F7F;
				background: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script>
			$(function(){
				const images = [
					'img/111.jpg',
					'img/222.jpg',
					'img/333.jpg',
					'img/444.jpg',
					'img/555.jpg',
					'img/666.jpg'
				]
				const ul = $('<ul class="btn"></ul>')
				for(let i = 0; i < images.length; i++){
					$('<div></div>').css({
						background: 'url(' + images[i] + ')'
					}).appendTo($('#app'))
					$('<li></li>').appendTo(ul)
				}
				ul.appendTo($("#app"))
				let index = 0
				setInterval(function(){
					//一个标签加入show类后，就不能有hide，所以需要使用removeClass去掉hide类
					$('#app>div').eq(index).addClass('show').removeClass('hide').siblings('div').addClass('hide').removeClass('show')
					index++
					if(index === images.length){
						index = 0
					}
				}, 3000)
			})
		</script>
	</body>
</html>