jQuery-图片轮播

2021/8/24 6:07:20

编程Tag： 图片 jQuery var img banner 轮播 prev arrow left

本文主要是介绍jQuery-图片轮播，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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>

这篇关于jQuery-图片轮播的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery-图片轮播

相关编程文章