jQuery-图片轮播

互联网 2021/8/24 6:07:20

<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" co…
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		/* div img {
			width: 300px;
			height: 180px;
		} */
		#banner {
			width: 1010px;
			max-height: 455px;
			border: 2px solid red;
			position: relative;
		}
	
		img {
			display: none;
		}
	
		.start {
			display: block;
		}
	
		ul {
			position: absolute;
			right: 0;
			bottom: 0;
		}
	
		li {
			float: left;
			margin-left: 40px;
			color: white;
			font-size: 30px;
			/* 透明度 */
			opacity: 0.5;
			/* 让元素鼠标放置上为小手 */
			cursor: pointer;
		}
		#banner .arrow {
			position: absolute;
			top: 35%;
			color: yellow;
			padding:0px 14px;
			border-radius: 50%;
			font-size: 50px;
			z-index: 2;
			display: none;
		}
		#banner .arrow_left {
			left: 10px;
		}
		#banner .arrow_right {
			right: 10px;
		}
		#banner:hover .arrow {
			display: block;
		}
		#banner .arrow:hover {
			background-color: rgba(0,0,0,0.2);
		}
	</style>
</head>
<body>
	<div id="banner">
			<img src="ad1.jpg" class="start">
			<img src="ad2.jpg">
			<img src="ad3.jpg">
			<img src="ad4.jpg">
			
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<a href="javascript:;" class="arrow arrow_left"><</a>
			<a href="javascript:;" class="arrow arrow_right">></a>
	</div>
</body>
</html>
<script src="jQuery-3.5.1.min.js"></script>
<script>
	$("li").first().css("opacity", 1);

	$(".arrow_left").click(function(){
		var i = $("img:visible").index();
		
		// 得知轮播图有几个
		var imgLen = $("img").length;
		// 计算上一个图片的下标(当前显示的图片下标-1)
		if(i >= 1){
			var prev = i-1;
		}else{
			var prev = 0;
		}
		if(i == 3){
			prev = 0;
		}
		// 让所有图片暂时隐藏
		$("img").hide();
		$("li").css("opacity", 0.5);
		
		if(prev<=imgLen){
			$("img").eq(prev).show();
			// 让指示点显示
			$("li").eq(prev).css("opacity", 1);
		}else{;
			$(".start").show();
			// 让指示点显示
			$("li").first().css("opacity", 1);
		}
	});
	$(".arrow_right").click(function(){
		var i = $("img:visible").index();
		
		// 得知轮播图有几个
		var imgLen = $("img").length;
		// 计算下一个图片的下标(当前显示的图片下标+1)
		var next = i+1;
		// 让所有图片暂时隐藏
		$("img").hide();
		$("li").css("opacity", 0.5);
		// 判断:+1后不能超过总长度,10个元素,最后一个下标为9
		if(next<imgLen){
			$("img").eq(next).show();
			// 让指示点显示
			$("li").eq(next).css("opacity", 1);
		}else{;
			$(".start").show();
			// 让指示点显示
			$("li").first().css("opacity", 1);
		}
		
		
	// });
	$("li").hover(
		function() {
			// 获取当前鼠标放置的li的下标
			var i = $(this).index();
			// 让对应的图片进行显示
			$("img").hide();
			$("img").eq(i).show();
			// 去掉点的透明样式
			$("li").eq(i).css("opacity", 1);
			// 清除定时器
			clearInterval(scrollImg);
		},
		function() {
			// 获取当前鼠标放置的li的下标
			var i = $(this).index();
			// 增添透明样式
			$("li").eq(i).css("opacity", 0.5);
			// 定时器继续
			scrollImg = setInterval(scrollImgFun, 2000);
		}
	);
	function scrollImgFun() {
		// 找到当前显示的图片的下标
		var i = $("img:visible").index();
		// 得知轮播图有几个
		var imgLen = $("img").length;
		// 计算下一个图片的下标(当前显示的图片下标+1)
		var next = i+1;
		// 让所有图片暂时隐藏
		$("img").hide();
		// 增添透明样式
		$("li").css("opacity", 0.5);
		// 判断:+1后不能超过总长度,10个元素,最后一个下标为9
		if(next<imgLen){
			$("img").eq(next).show();
			// 让指示点显示
			$("li").eq(next).css("opacity", 1);
		}else{;
			$(".start").show();
			// 让指示点显示
			$("li").first().css("opacity", 1);
		}
	}
	scrollImg = setInterval(scrollImgFun, 2000);

</script>

  

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[jQuery-图片轮播]http://www.zyiz.net/tech/detail-219229.html

上一篇:jquery的【$.ajax】和【node的回调函数】

下一篇:第一章:JQuery选择器

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程