jQuery学习:点击元素-更换图片的内容

¡Venceremo

于 2022-11-18 12:06:39 发布

阅读量264

点赞数

分类专栏： jquery 文章标签： jquery 学习 javascript

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127919852

版权

jquery 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

使用拼字符串更改图片的来源


			function hoverMiniImg() {
				$('#icon_list>li').hover(function() {
					//鼠标移入

					$(this).css('color', 'red'); //添加样式
					//显示对应的中图
					var src = "../../img/a" + $(this).index() + ".png";
					$('#mediuImg').attr('src', src)

				}, function() {
					//鼠标移出
					$(this).css('color', 'black'); //添加样式

				});
			}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.6.1.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style-type: none;
			}

			#product_intro {
				position: relative;
				overflow: hidden;
				height: 600px;
				width: 520px;
			}

			#mediuImg {
				width: 520px;
				height: 450px;
			}

			.backward,
			.forword {
				display: inline-block;
				font-size: 60px;
				width: 60px;
				height: 150px;
				line-height: 150px;
				background: yellow;
				float: left;
				text-decoration: none;
				overflow: hidden;


			}

			.forword {
				position: absolute;
				left: 0px;
			}


			.backward {
				position: absolute;
				left: 460px;

			}

			.color {
				width: 60px;
				height: 150px;
				background-color: royalblue;

			}


			#icon_list {
				position: absolute;
				height: 150px;
				width: 800px;
				float: left;
				font-size: 0px;
				left: 60px;
			}

			#icon_list li {
				width: 100px;
				height: 150px;
				font-size: 30px;
				font-weight: bold;
				text-align: center;
				line-height: 150px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="product_intro">
			<img id="mediuImg" src="../../img/a0.png" alt="图片">
			<div>
				<ul id="icon_list">
					<li style="background: #2ab;">1</li>
					<li style="background: #bfa;">2</li>
					<li style="background: #acb;">3</li>
					<li style="background: #897;">4</li>
					<li style="background: #345;">5</li>
					<li style="background: #a56;">6</li>
					<li style="background: #189;">7</li>
					<li style="background: #c78;">8</li>
				</ul>
			</div>
			<!-- 点击监听 -->
			<a class="backward" href="#">&#x2192;</a>
			<a class="forword" href="#">&#x2190;</a>

		</div>
		<script>
			moveMiniImg();
			hoverMiniImg();

			function hoverMiniImg() {
				$('#icon_list>li').hover(function() {
					//鼠标移入

					$(this).css('color', 'red'); //添加样式
					//显示对应的中图
					var src = "../../img/a" + $(this).index() + ".png";
					$('#mediuImg').attr('src', src)

				}, function() {
					//鼠标移出
					$(this).css('color', 'black'); //添加样式

				});
			}

			function moveMiniImg() {
				var $aa = $('#product_intro>a');
				var $backward = $('.backward');
				var $forword = $('.forword');
				var $ul = $('#icon_list');
				var showPic = 4; //一次性显示4个
				var imgCount = $ul.children().length; //所有图片数量
				var distance = $ul.children(':first').width();


				//初始化更新
				if (imgCount > showPic) {
					$forword.addClass('color')
				}
				//向右的绑定监听
				var moveCount = 0; //点击向右+1 点击向左 -1 
				var curLeft = 0;
				var now = $ul.offset().left;


				$backward.click(function() {
					//判断是否需要移动 不需要直接不行
					if (moveCount === imgCount - showPic) { //4个
						$backward.addClass('color');
						return
					}

					moveCount++;
					//更新右边移动的按钮
					$forword.removeClass('color');
					//更新右边的按钮
					if (moveCount === imgCount - showPic) {
						$backward.addClass('color');
					}
					//移动图片的距离
					curLeft = $ul.offset().left - distance;
					$ul.css('left', curLeft);
				})

				//更新左边移动的按钮
				$forword.click(function() {

					//判断是否需要移动 不需要直接不行
					if (moveCount === 0) { //一上来不能移动 是0
						$forword.addClass('color');
						return
					}

					moveCount--;
					//更新右边移动的按钮
					$backward.removeClass('color');
					//更新左边的按钮
					if (moveCount === 0) {
						$forword.addClass('color');
					}
					//移动图片的距离
					curLeft = $ul.offset().left + distance;
					$ul.css('left', curLeft);
				})

			}
		</script>
	</body>
</html>