jquery幻灯片

最新推荐文章于 2022-06-06 21:45:29 发布

清静清源

最新推荐文章于 2022-06-06 21:45:29 发布

阅读量160

点赞数

分类专栏： Web 前端基础文章标签：幻灯片

本文链接：https://blog.csdn.net/qq_35068659/article/details/114766388

版权

Web 前端基础专栏收录该内容

32 篇文章 2 订阅

订阅专栏

$h t m l$ 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>幻灯片</title>
		<style>
			body, * {
				font-size: 10px;
			}
			#parse span {
				color: #667;
				background-color: #fb5;
			}
			#container {
				position: relative;
				overflow: hidden;
				width: 120px;
				height: 100px;
			}
			#container #slide,
			#container #slide div,
			#container #slide div > img {
				position: absolute;
				width: inherit;
				height: inherit;
			}
			#container #slide > div:nth-child(1) {
				left: 0;
			}
			#container #slide > div:nth-child(2) {
				left: 100%;
			}
			#container #slide > div:nth-child(3) {
				left: 200%;
			}
			#container #slide > div:nth-child(4) {
				left: 300%;
			}
			#container #slide > div:nth-child(5) {
				left: 400%;
			}
			#container #slide > div:nth-child(6) {
				left: 500%;
			}
		</style>
	</head>
	<body>
		<p id="parse">
			<span>bassist</span>
			<span>lineup</span>
			<span>drummer</span>
			<span>basshead</span>
			<span>portrait</span>
			<span>guitarist</span>
		</p>
		<div id="container">
			<div id="slide">
				<div><img src="img/bassist.gif"></div>
				<div><img src="img/lineup.gif"></div>
				<div><img src="img/drummer.gif"></div>
				<div><img src="img/basshead.gif"></div>
				<div><img src="img/portrait.gif"></div>
				<div><img src="img/guitarist.gif"></div>
			</div>
		</div>
		<script src="js/jquery.js"></script>
		<script>
			$(function(){
				let n = $("span");
				for (let i = 0; i < n.length; i++) {
					// jquery 核心函数
					// 设置每个 span 标签的数据
					$( $("span")[i] ).data({
						index : i
					});
				}
			});
			
			$("span").mouseover(function(){
				let slide = $("#container #slide");
				let n = $(this).data()['index'];
				let offset = -n * 100;
				switch (n) {
					case 0: case 1:
					case 2: case 3:
					case 4: case 5:
					slide.animate({
						left : offset + '%'
					}, 300 * (n + 1));
				}
			});
			
			$("span").mouseout(function(){
				let slide = $("#container #slide");
				slide.animate({left: 0}, 2000);
			});
		</script>
	</body>
</html>

南无阿弥陀佛，善哉善哉

清静清源

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery幻灯片

htmlhtmlhtml 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>幻灯片</title> <style> body, * { font-size: 10px; } #parse span { color: #667; background-color: #fb5; }
复制链接

扫一扫