jquery 实现淡入淡出切换效果

最新推荐文章于 2023-12-14 19:51:15 发布

能c能v

最新推荐文章于 2023-12-14 19:51:15 发布

阅读量288

点赞数

分类专栏： JavaScript css3

本文链接：https://blog.csdn.net/qq_43391160/article/details/112603342

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淡入淡出</title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		.carousel-box {
			cursor: pointer;
			position: relative;
			max-width: 1200px;
			margin: 100px auto;
			min-height: 325px;
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
		}

		.carousel-slide {
			font-size: 0;
		}

		.carousel-slide img {
			width: 100%;
		}

		.carousel-item {
			width: 100%;
			display: none;
			position: absolute;
			left: 0;
			top: 0;
		}

		.carousel-item.active {
			display: block;
		}

		.carousel-direction span {
			color: white;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
			font-family: "宋体";
			font-size: 30px;
			width: 50px;
			height: 80px;
			line-height: 80px;
			background: rgba(0, 0, 0, .2);
			text-align: center;
			display: none;
		}

		.carousel-direction .right {
			right: 0;
			left: auto;
		}

		.carousel-box:hover .right,
		.carousel-box:hover .left {
			display: block;
		}

		.carousel-dots {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10px;
		}

		.carousel-dots span {
			display: inline-block;
			text-align: center;
			line-height: 15px;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: #CCCCCC;
			color: white;
			font-size: 12px;
			margin: 0 5px;
		}

		.carousel-dots span.active {
			background: rgba(0, 0, 0, 0.6);
		}
	</style>
	<body>
		<div class="carousel-box">
			<div class="carousel-slide">
				<div class="carousel-item">
					<img src="" alt="">
				</div>
			</div>
			<div class="carousel-direction">
				<span class="left">&lt;</span>
				<span class="right">&gt;</span>
			</div>
			<div class="carousel-dots">
				<span class="dot-item"></span>
			</div>
		</div>
	</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
	// 定义基础数据
	var imgList = ["https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2560752927,1457120649&fm=26&gp=0.jpg",
			"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1307708707,766269234&fm=15&gp=0.jpg",
			"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1959075230,3016714846&fm=15&gp=0.jpg",
			"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1608711785,199094435&fm=26&gp=0.jpg",
			"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1796150397,2626234044&fm=15&gp=0.jpg"
		],
		carouselSlide = $(".carousel-slide"),
		directions = $(".carousel-direction span"),
		dotBox = $(".carousel-dots"),
		dots,
		imgItem,
		timer = null,
		imgIndex = 0,
		dotHtml = '',
		imgHtml = '';
	// 填充数据
	for (let i = 0; i < imgList.length; i++) {
		imgHtml += `<div class="carousel-item ${i===0?'active':''}"><img src="${imgList[i]}" alt=""></div>`
		dotHtml += `<span class="dot-item ${i===0?'active':''}">${i+1}</span>`
		carouselSlide.html(imgHtml)
		dotBox.html(dotHtml)
		// 渲染之后才可以获得dom元素
		dots = $(".carousel-dots span")
		imgItem = $(".carousel-item")
	}
	// 播放
	function paly() {
		imgIndex = imgIndex % imgList.length
		imgItem.eq(imgIndex).stop().fadeIn(500).siblings().fadeOut(1000);
		dots.eq(imgIndex).addClass("active").siblings().removeClass("active")
	}
	// 自动播放
	function autoPlay() {
		timer = setInterval(function() {
			imgIndex++
			paly();
		}, 4000)
	}
	autoPlay()
	// 鼠标悬停停止播放
	$(".carousel-box").hover(function() {
		clearInterval(timer)
	}, function() {
		autoPlay()
	})
	// 点击左右按钮
	$(".left").click(function() {
		imgIndex--
		paly()
	})
	$(".right").click(function() {
		imgIndex++
		paly()
	})
	// 指示点事件
	$(".dot-item").click(function() {
		let dotIndex = $(this).index()
		imgIndex = dotIndex
		imgItem.eq(imgIndex).stop().fadeIn(500).siblings().fadeOut(1000);
		dots.eq(imgIndex).addClass("active").siblings().removeClass("active")
	})
	// 添加监听事件
	document.addEventListener('webkitvisibilitychange', function() {
		var isHidden = document.webkitVisibilityState;
		if (isHidden == 'hidden') {
			// 浏览器隐藏则关闭轮播
			clearInterval(timer)
		} else {
			autoPlay()
		}
	});
</script>

线上预览

能c能v

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 实现淡入淡出切换效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>淡入淡出</title> </head> <style type="text/css"> * { padding: 0; margin: 0; box-sizing: border-box; } .carousel-box { cursor:.
复制链接

扫一扫