jQuery商城商品图片展示下单选购代码

reg183

已于 2022-03-16 16:55:12 修改

阅读量1.5k

点赞数

分类专栏：前端文章标签： jquery javascript 前端

于 2022-03-16 16:53:30 首次发布

本文链接：https://blog.csdn.net/chendongpu/article/details/123530412

版权

jQuery 商品图片鼠标悬停点击选购 JavaScript

关键词由CSDN通过智能技术生成

前端专栏收录该内容

255 篇文章 3 订阅

订阅专栏

效果如图
请添加图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery商城商品图片展示下单选购代码</title>

<link rel="stylesheet" href="css/shouye.css">

<script src="js/jquery-1.8.3.min.js"></script>
<script   src="js/modernizr-custom-v2.7.1.min.js"></script>
<script>
	$(document).ready(function(){
var $miaobian=$('.Xcontent08>div');
var $huantu=$('.Xcontent06>img');
var $miaobian1=$('.Xcontent26>div');
$miaobian.mousemove(function(){miaobian(this);});
$miaobian1.click(function(){miaobian1(this);});
function miaobian(thisMb){
	for(var i=0; i<$miaobian.length; i++){
		$miaobian[i].style.borderColor = '#dedede';
	}
	thisMb.style.borderColor = '#cd2426';

	$huantu[0].src = thisMb.children[0].src;
}
function miaobian1(thisMb1){
	for(var i=0; i<$miaobian1.length; i++){
		$miaobian1[i].style.borderColor = '#dedede';
	}
//		thisMb.style.borderColor = '#cd2426';
	$miaobian.css('border-color','#dedede');
	thisMb1.style.borderColor = '#cd2426';
	$huantu[0].src = thisMb1.children[0].src;
}
		$(".Xcontent33").click(function(){
		var value=parseInt($('.input').val())+1;
		$('.input').val(value);
	})

	$(".Xcontent32").click(function(){	
		var num = $(".input").val()
		if(num>0){
			$(".input").val(num-1);
		}			
		
	})

	})
</script>

</head>
<body><script src="/demos/googlegg.js"></script>

<div class="Xcontent">
	<ul class="Xcontent01">
		<div class="Xcontent06"><img src="images/shangpinxiangqing/X1.png"></div>
		<ol class="Xcontent08">
			<div class="Xcontent07"><img src="images/shangpinxiangqing/X1.png"></div>
			<div class="Xcontent09"><img src="images/shangpinxiangqing/X7.png"></div>
			<div class="Xcontent10"><img src="images/shangpinxiangqing/X8.png"></div>
			<div class="Xcontent11"><img src="images/shangpinxiangqing/X9.png"></div>
			<div class="Xcontent12"><img src="images/shangpinxiangqing/X10.png"></div>
		</ol>
		<ol class="Xcontent13">
			<div class="Xcontent14"><a href="#"><p>新物品</p></a></div>
			<div class="Xcontent15"><img src="images/shangpinxiangqing/X11.png"></div>
			<div class="Xcontent16"><p>充电5分钟，温暖2小时</p></div>
			<div class="Xcontent17">
				<p class="Xcontent18">售价</p>
				<p class="Xcontent19">￥<span>69.00</span></p>
				<div class="Xcontent20">
					<p class="Xcontent21">促销</p>
					<img src="images/shangpinxiangqing/X12.png">
					<p class="Xcontent22">领610元新年礼券，满再赠好礼</p>
				</div>
				<div class="Xcontent23">
					<p class="Xcontent24">服务</p>
					<p class="Xcontent25">30天无忧退货&nbsp;&nbsp;&nbsp;&nbsp;       48小时快速退款 &nbsp;&nbsp;&nbsp;&nbsp;        满88元免邮</p>
				</div>
				
			</div>
			<div class="Xcontent26">
				<p class="Xcontent27">颜色</p>
				<div class="Xcontent28"><img  src="images/shangpinxiangqing/X14.png"></div>
					<div class="Xcontent29"><img  src="images/shangpinxiangqing/X1.png"></div>
			</div>
			<div class="Xcontent30">
				<p class="Xcontent31">数量</p>
				<div class="Xcontent32"><img src="images/shangpinxiangqing/X15.png"></div>
				<form><input class="input" value="1"></form>
				<div class="Xcontent33"><img src="images/shangpinxiangqing/16.png"></div>
			</div>
			<div class="Xcontent34"><a href="#"><img src="images/shangpinxiangqing/X17.png"></a></div>
			<div class="Xcontent35"><a href="#"><img src="images/shangpinxiangqing/X18.png"></a></div>
		</ol>
	</ul>
</div>


</body>
</html>