项目难点
1.轮播图
//实例 $(function () { $(".num li").bind("click mouseover", function () { var index = $(this).index(); $(".slider").animate({ "top": (150) * index + "px" }); $(this).addClass("on").siblings().removeClass("on"); }) })2.放大镜
//外部插件 <script type="text/javascript" src="js/jquery.jqzoom.js" ></script> //实例 $(function(){ $(".jqzoom").jqueryzoom({ xzoom:300, yzoom:300, offset:10, position:"right", preload:1 }) })3.多张图片的切换
//根据颜色换大图 $(function(){ $(".color_change>ul>li>img").click(function(){ var a=$(this).attr("src"); var color=$(this).attr("alt"); /*alert(color);*/ var src=a.split("img/"); /*alert(src[1]);*/ var b=src[1].split(".jpg"); /*alert(b[0]);*/ //更换大图 $(".jqzoom>img").attr("src","images/pro_img/"+b[0]+"_one_small.jpg"); $(".jqzoom>img").attr("jqimg","images/pro_img/"+b[0]+"_one_big.jpg"); //更换字体 $(".color_change:first strong"。).html(color); //更换下面三张图片 $(".imgList li img:eq(0)").attr("src","images/pro_img/"+b[0]+"_one.jpg"); $(".imgList li img:eq(1)").attr("src","images/pro_img/"+b[0]+"_two.jpg"); $(".imgList li img:eq(2)").attr("src","images/pro_img/"+b[0]+"_three.jpg"); if (b[0]=="green") { $(".imgList li img:eq(2)").hide(); } else{ $(".imgList li img:eq(2)").show(); } }) })页面HTML代码
1.首页
<body> <!--头部开始--> <div id="header"> <a id="logo" href="#">Jane Shopping</a> <ul id="skin"> <li id="skin_0" title="蓝色" class="selected">蓝色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色">天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</li> </ul> </div> <!--头部结束--> <!--导航开始--> <div id="navigation"> <ul> <li><a href="#">首 页</a></li> <li><a href="#">衬 衫</a> <ul> <li><a href="#">短袖衬衫</a></li> <li><a href="#">长袖衬衫</a></li> <li><a href="#">无袖衬衫</a></li> </ul> </li> <li><a href="#">卫 衣</a> <ul> <li><a href="#">开襟卫衣</a></li> <li><a href="#">套头卫衣</a></li> </ul> </li> <li><a href="#">裤 子</a> <ul> <li><a href="#">休闲裤</a></li> <li><a href="#">卡其裤</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">短裤</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul> </div> <!--导航结束--> <!--主体开始--> <div id="content"> <div class="content_left"> <div class="global_module news"> <h3>最新动态</h3> <div class="scrollNews" > <ul> <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li> <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li> <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li> <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li> <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li> <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li> <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li> </ul> </div> <p class="module_up_down" id="scroll"><img src="images/down.gif" alt="" /></p> </div> <div class="global_module procatalog"> <h3>产品分类</h3> <ul class="m-treeview"> <li class="m-expanded"> <span>衬衫</span> <ul> <li><span>短袖衬衫</span></li> <li><span>长袖衬衫</span></li> </ul> </li> <li class="m-expanded"> <span>卫衣</span> <ul> <li ><span>开襟卫衣</span></li> <li ><span>套头卫衣</span></li> </ul> </li> <li class="m-expanded"> <span>裤子</span> <ul> <li><span>休闲裤</span></li> <li><span>免烫卡其裤</span></li> <li><span>牛仔裤</span></li> <li><span>短裤</span></li> </ul> </li> </ul> <p class="module_up_down" id="expand"><img src="images/down.gif" alt="" /></p> </div> </div> <div class="content_right"> <div class="ad" > <ul class="slider" > <li><img src="images/ads/1.gif"/></li> <li><img src="images/ads/2.gif"/></li> <li><img src="images/ads/3.gif"/></li> <li><img src="images/ads/4.gif"/></li> <li><img src="images/ads/5.gif"/></li> </ul> <ul class="num" > <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="global_module prolist"> <h3>新款上市</h3> <div class="prolist_content"> <ul> <li> <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> </ul> </div> <p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p> </div> </div> </div> <!--主体结束--> </body>2.详情页面
<body> <!--头部开始--> <div id="header"> <a id="logo" href="#">Jane Shopping</a> <ul id="skin"> <li id="skin_0" title="蓝色" class="selected">蓝色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色">天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</li> </ul> </div> <!--头部结束--> <!--导航开始--> <div id="navigation"> <ul> <li><a href="index.html">首 页</a></li> <li><a href="#">衬 衫</a> <ul> <li><a href="#">短袖衬衫</a></li> <li><a href="#">长袖衬衫</a></li> <li><a href="#">无袖衬衫</a></li> </ul> </li> <li><a href="#">卫 衣</a> <ul> <li><a href="#">开襟卫衣</a></li> <li><a href="#">套头卫衣</a></li> </ul> </li> <li><a href="#">裤 子</a> <ul> <li><a href="#">休闲裤</a></li> <li><a href="#">卡其裤</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">短裤</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul> </div> <!--导航结束--> <!--主体内容开始--> <div id="content" class="global_module"> <h3>商品信息</h3> <div class="pro_detail"> <div class="pro_detail_left"> <div class="jqzoom"><img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/></div> <span> <a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox"> <img alt="点击看大图" src="images/look.gif" /> </a> </span> <ul class="imgList"> <li><img src="images/pro_img/blue_one.jpg" alt="" /></li> <li><img src="images/pro_img/blue_two.jpg" alt="" /></li> <li><img src="images/pro_img/blue_three.jpg" alt="" /></li> </ul> <div class="tab"> <div class="tab_menu"> <ul> <li class="selected">产品属性</li> <li>产品尺码表</li> <li>产品介绍</li> </ul> </div> <div class="tab_box"> <div> 沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。 </div> <div class="hide"> 来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。 </div> <div class="hide"> 世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。 </div> </div> </div> </div> <div class="pro_detail_right"> <h4>免烫高支棉条纹衬衣</h4> <p>全新精品高支棉衬衫再次提升品质，精选100%新疆长绒棉织造而成，平整度好，短绒少； 80-100高支双股经纬交织，带来无与伦比的舒适享受；而且面料反光效果好，具有漂亮的光泽，质感上佳，有利于免烫效果的维持。※不仅如此，深受消费者欢迎的经典款式使精品高支棉衬衫更贴合东方人身型气质，多款衬衫还采用简单且个性鲜明条纹元素，利用最为单纯的几何线条，透过条纹的粗细、宽窄间的重组，带出令人耳目一新的时尚气息，更显出俊朗男士的挺拔身型！</p> <p><strong>现价：200元 <del>原价：300元</del></strong></p> <p><strong>编号：33313993</strong></p> <div class="color_change"> 颜色：<strong>蓝白</strong> <ul> <li><img src="images/pro_img/blue.jpg" alt="蓝白" /></li> <li><img src="images/pro_img/yellow.jpg" alt="黄白" /></li> <li><img src="images/pro_img/green.jpg" alt="粉绿" /></li> </ul> </div> <div class="pro_size"> 尺寸：<strong>未选择</strong> <ul> <li><span>S</span></li> <li><span>L</span></li> <li><span>SL</span></li> <li><span>LL</span></li> </ul> </div> <div class="pro_num"> 数量： <select id="num_sort" style="width:40px;" > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="pro_price"> 总计：<span>200</span>元 </div> <div class="pro_rating"> 给商品评分： <ul class="rating nostar"> <li class="one" value="1"><a href="#" title="1分">1</a></li> <li class="two" value="2"><a href="#" title="2分">2</a></li> <li class="three" value="3"><a href="#" title="3分">3</a></li> <li class="four" value="4"><a href="#" title="4分">4</a></li> <li class="five" value="5"><a href="#" title="5分">5</a></li> </ul> </div> <div id="cart"> <a href="#"><img src="images/btn_cart.png"/></a> </div> </div> </div> </div> <!--主体内容结束--> </body>效果图
