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

效果如图
jQuery商城商品图片展示下单选购代码_第1张图片


<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.00span>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天无忧退货           48小时快速退款             满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>


下载源码

你可能感兴趣的:(前端,jquery,javascript,前端)