<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jane shopping</title> <link rel="stylesheet" href="styles/main.css" type="text/css" /> <link rel="stylesheet" href="styles/index.css" type="text/css" /> <link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //头部换色 $(function () { $("#skin li").click(function () { var css = "styles/skin/" + $(this).attr("id") + ".css"; $("#cssfile").attr("href", css); $(this).addClass("selected").siblings().removeClass("selected"); }) }) //收缩 $(function(){ $(".module_up_down img[id]").click(function(){ var $this=$(this); $(".scrollNews").slideToggle(1000,function(){ var img =$this.attr("src"); if(img =="images/down.gif") img="images/up.gif"; else img = "images/down.gif"; $this.attr("src",img); }) }) }) $(function(){ $(".module_up_down img[name]").click(function(){ var $this=$(this); $(".m-treeview").slideToggle(1000,function(){ var img =$this.attr("src"); if(img =="images/down.gif") img="images/up.gif"; else img = "images/down.gif"; $this.attr("src",img); }) }) }) $(function(){ $(".m-treeview > li").click(function(){ var cl=$(this).attr("class"); if (cl =="m-expanded") $(this).attr("class","m-collapsed"); else if(cl =="m-collapsed") $(this).attr("class","m-expanded"); }) }) $(function(){ var index=0; $(".goRight").click(function(){ index++; if(index>=3){ index=0; } $(".prolist_content").animate({ "left":(-584)*index+"px" },1000) }); $(".goLeft").click(function(){ index--; if(index<0){ index=2; } $(".prolist_content").animate({ "left":(-584)*index+"px" },1000) }); }) // $(function(){ // $(".num li").bind("click mouseover",function(){ // var index=$(this).index(); // $(".slider").animate({ // "top": (-150) * index + "px" // },100) // $(this).addClass("on").siblings().removeClass("on"); // }) // }) $(function(){ setInterval(function(){ $(".scrollNews li:first") .remove() .appendTo($(".scrollNews ul")); },1000) }) $(function () { var len = $(".num > li").length; var index = 0; var adTimer; $(".num li").mouseover(function () { index = $(".num li").index(this); showImg(index); }).eq(0).mouseover(); //滑入 停止动画，滑出开始动画. $('.ad').hover(function () { clearInterval(adTimer); }, function () { adTimer = setInterval(function () { showImg(index) index++; if (index == len) { index = 0; } }, 1000); }).trigger("mouseleave"); }) // 通过控制top ，来显示不同的幻灯片 function showImg(index) { var adHeight = $(".ad").height(); $(".slider").stop(true, false).animate({ top: -adHeight * index }, 100); $(".num li").removeClass("on") .eq(index).addClass("on"); } </script> </head> <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"><img id="img1" 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"><img name="two" 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> </html>
