jquery的商品首页

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>

 

posted @ 2018-01-08 22:25  前端极客  阅读(592)  评论(0)  编辑  收藏  举报