js程式碼：
1 $(function() { 2 /*新聞滾動*/ 3 var $this = $('.scrollNews'); 4 var scrollTimer; 5 $this.hover(function () { 6 clearInterval(scrollTimer); 7 }, function () { 8 scrollTimer = setInterval(function () { 9 scrollNews($this); 10 }, 3000) 11 }).trigger('mouseleave'); 12 13 // *模組展開和關閉*/ 14 $(".module_up_down").toggle(function(){ 15 var $self = $(this); 16 $self.prev().slideToggle(600,function(){ 17 $("img",$self).attr("src","images/up.gif"); 18 }); 19 },function(){ 20 var $self = $(this); 21 $self.prev().slideToggle(600,function(){ 22 $("img",$self).attr("src","images/down.gif"); 23 }); 24 }) 25 /*產品樹展開和關閉*/ 26 $(".m-treeview > li > span").click(function(){ // 注意用的是 子選擇器 ( > ) 27 var $ul = $(this).siblings("ul"); 28 if($ul.is(":visible")){ 29 $(this).parent().attr("class","m-collapsed"); 30 $ul.hide(); 31 }else{ 32 $(this).parent().attr("class","m-expanded"); 33 $ul.show(); 34 } 35 return false; 36 }) 37 // 輪播圖 38 var len=$('.num>li').length; 39 var index=0; 40 var adTimer; 41 $('.num li').mouseover(function () { 42 index=$('.num li').index(this); 43 showImg(index); 44 }); 45 $('.ad').hover(function () { 46 clearInterval(adTimer); 47 },function(){ 48 adTimer=setInterval(function () { 49 showImg(index); 50 index++; 51 if(index==len){index=0;} 52 },3000); 53 }).trigger('mouseleave'); 54 55 /*新款上市模組橫向滾動*/ 56 var page=1; 57 var i=4; 58 var len=$('.prolist_content ul li').length; 59 var page_count=Math.ceil(len/i); 60 var none_unit_width=$('.prolist').width(); 61 var $parent =$('.prolist_content'); 62 $('.goRight').click(function () { 63 if(page==page_count){ 64 $parent.animate({left:0},800); 65 page=1; 66 }else{ 67 $parent.animate({left:'-='+none_unit_width},800); 68 page++; 69 } 70 }); 71 $('.goLeft').click(function () { 72 if(!$parent.is(':animated')){ 73 if(page=1){ 74 $parent.animate({lefg:'-='+none_unit_width*(page_count-1)},800); 75 page=page_count; 76 }else{ 77 $parent.animate({left:"+="+none_unit_width},800) 78 page--; 79 } 80 } 81 }) 82 83 84 85 86 }); 87 function scrollNews(obj) { 88 var $self=obj.find('ul:first'); 89 var lineHeight=$self.find('li:first').height(); 90 $self.animate({'marginTop':-lineHeight+"px"},600,function () { 91 $self.css({marginTop:0}).find('li:first').appendTo($self); 92 }) 93 } 94 95 function showImg(index){ 96 var adHeight=$('.content_right .ad').height(); 97 $('.slider').stop(true,false).animate({top:-adHeight*index},1000); 98 $('.num li').removeClass('on') 99 .eq(index).addClass('on'); 100 }
html程式碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>我的Jane shopping</title> 6 <link rel="stylesheet" href="styles/main.css" type="text/css" /> 7 <link rel="stylesheet" href="styles/index.css" type="text/css" /> 8 <link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" /> 9 <script src="scripts/jquery-1.3.1.js" type="text/javascript"></script> 10 <script src="scripts/index.js"></script> 11 </head> 12 <body> 13 <!--頭部開始--> 14 <div id="header"> 15 <a id="logo" href="#">Jane Shopping</a> 16 <ul id="skin"> 17 <li id="skin_0" title="藍色" class="selected">藍色</li> 18 <li id="skin_1" title="紫色">紫色</li> 19 <li id="skin_2" title="紅色">紅色</li> 20 <li id="skin_3" title="天藍色">天藍色</li> 21 <li id="skin_4" title="橙色">橙色</li> 22 <li id="skin_5" title="淡綠色">淡綠色</li> 23 </ul> 24 25 </div> 26 <!--頭部結束--> 27 <!--導航開始--> 28 <div id="navigation"> 29 <ul> 30 <li><a href="#">首 頁</a></li> 31 <li><a href="#">襯 衫</a> 32 <ul> 33 <li><a href="#">短袖襯衫</a></li> 34 <li><a href="#">長袖襯衫</a></li> 35 <li><a href="#">無袖襯衫</a></li> 36 </ul> 37 </li> 38 <li><a href="#">衛 衣</a> 39 <ul> 40 <li><a href="#">開襟衛衣</a></li> 41 <li><a href="#">套頭衛衣</a></li> 42 </ul> 43 </li> 44 <li><a href="#">褲 子</a> 45 <ul> 46 <li><a href="#">休閒褲</a></li> 47 <li><a href="#">卡其褲</a></li> 48 <li><a href="#">牛仔褲</a></li> 49 <li><a href="#">短褲</a></li> 50 </ul> 51 </li> 52 <li><a href="#">聯絡我們</a></li> 53 </ul> 54 </div> 55 <!--導航結束--> 56 <!--主體開始--> 57 <div id="content"> 58 <div class="content_left"> 59 <div class="global_module news"> 60 <h3>最新動態</h3> 61 <div class="scrollNews" > 62 <ul> 63 <li><a href="#" class="tooltip" title="甜美寬鬆毛衣今秋一定紅.">甜美寬鬆毛衣今秋一定紅.</a></li> 64 <li><a href="#" class="tooltip" title="秋裝百搭小馬甲不到50元.">秋裝百搭小馬甲不到50元.</a></li> 65 <li><a href="#" class="tooltip" title="修身韓版小西裝萬人瘋搶.">修身韓版小西裝萬人瘋搶.</a></li> 66 <li><a href="#" class="tooltip" title="夏末雪紡店主含淚大甩賣.">夏末雪紡店主含淚大甩賣.</a></li> 67 <li><a href="#" class="tooltip" title="瑞麗都瘋狂推薦的秋裝.">瑞麗都瘋狂推薦的秋裝.</a></li> 68 <li><a href="#" class="tooltip" title="48元長款針織小開衫賣瘋啦.">48元長款針織小開衫賣瘋啦.</a></li> 69 <li><a href="#" class="tooltip" title="長袖雪紡衫單穿內搭都超美.">長袖雪紡衫單穿內搭都超美.</a></li> 70 </ul> 71 </div> 72 <p class="module_up_down"><img src="images/down.gif" alt="" /></p> 73 </div> 74 <div class="global_module procatalog"> 75 <h3>產品分類</h3> 76 <ul class="m-treeview"> 77 <li class="m-expanded"> 78 <span>襯衫</span> 79 <ul> 80 <li><span>短袖襯衫</span></li> 81 <li><span>長袖襯衫</span></li> 82 </ul> 83 </li> 84 <li class="m-expanded"> 85 <span>衛衣</span> 86 <ul> 87 <li ><span>開襟衛衣</span></li> 88 <li ><span>套頭衛衣</span></li> 89 </ul> 90 </li> 91 <li class="m-expanded"> 92 <span>褲子</span> 93 <ul> 94 <li><span>休閒褲</span></li> 95 <li><span>免燙卡其褲</span></li> 96 <li><span>牛仔褲</span></li> 97 <li><span>短褲</span></li> 98 </ul> 99 </li> 100 </ul> 101 <p class="module_up_down"><img src="images/down.gif" alt="" /></p> 102 </div> 103 </div> 104 <div class="content_right"> 105 <div class="ad" > 106 <ul class="slider" > 107 <li><img src="images/ads/1.gif"/></li> 108 <li><img src="images/ads/2.gif"/></li> 109 <li><img src="images/ads/3.gif"/></li> 110 <li><img src="images/ads/4.gif"/></li> 111 <li><img src="images/ads/5.gif"/></li> 112 </ul> 113 <ul class="num" > 114 <li>1</li> 115 <li>2</li> 116 <li>3</li> 117 <li>4</li> 118 <li>5</li> 119 </ul> 120 </div> 121 <div class="global_module prolist"> 122 <h3>新款上市</h3> 123 <div class="prolist_content"> 124 <ul> 125 <li> 126 <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免燙高支棉襯衣1</span><span>$120.00</span> 127 </li> 128 <li> 129 <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免燙斜紋襯衣</span><span>$129.00</span> 130 </li> 131 <li> 132 <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正裝襯衣</span><span>$129.00</span> 133 </li> 134 <li> 135 <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米蘭格襯衣藍色</span><span>$129.00</span> 136 </li> 137 <li> 138 <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免燙高支棉襯衣2</span><span>$120.00</span> 139 </li> 140 <li> 141 <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免燙斜紋襯衣</span><span>$129.00</span> 142 </li> 143 <li> 144 <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正裝襯衣</span><span>$129.00</span> 145 </li> 146 <li> 147 <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米蘭格襯衣藍色</span><span>$129.00</span> 148 </li> 149 <li> 150 <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免燙高支棉襯衣3</span><span>$120.00</span> 151 </li> 152 <li> 153 <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免燙斜紋襯衣</span><span>$129.00</span> 154 </li> 155 <li> 156 <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正裝襯衣</span><span>$129.00</span> 157 </li> 158 <li> 159 <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米蘭格襯衣藍色</span><span>$129.00</span> 160 </li> 161 </ul> 162 </div> 163 <p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p> 164 </div> 165 </div> 166 </div> 167 <!--主體結束--> 168 </body> 169 </html>