jquery的商品首页

js代码：

 $(function() {

     /*新闻滚动*/

     var $this = $('.scrollNews');

     var scrollTimer;

     $this.hover(function () {

         clearInterval(scrollTimer);

     }, function () {

         scrollTimer = setInterval(function () {

             scrollNews($this);

         }, 3000)

     }).trigger('mouseleave');

 // *模块展开和关闭*/

     $(".module_up_down").toggle(function(){

         var $self = $(this);

         $self.prev().slideToggle(600,function(){

             $("img",$self).attr("src","images/up.gif");

         });

     },function(){

         var $self = $(this);

         $self.prev().slideToggle(600,function(){

             $("img",$self).attr("src","images/down.gif");

         });

     })

     /*产品树展开和关闭*/

     $(".m-treeview > li > span").click(function(){ // 注意用的是 子选择器 (  >  )

         var $ul = $(this).siblings("ul");

         if($ul.is(":visible")){

             $(this).parent().attr("class","m-collapsed");

             $ul.hide();

         }else{

             $(this).parent().attr("class","m-expanded");

             $ul.show();

         }

         return false;

     })

 // 轮播图

 var len=$('.num>li').length;

     var index=0;

     var adTimer;

     $('.num li').mouseover(function () {

         index=$('.num li').index(this);

         showImg(index);

     });

     $('.ad').hover(function () {

         clearInterval(adTimer);

     },function(){

         adTimer=setInterval(function () {

             showImg(index);

             index++;

             if(index==len){index=0;}

         },3000);

     }).trigger('mouseleave');

     /*新款上市模块横向滚动*/

     var page=1;

     var i=4;

     var len=$('.prolist_content ul li').length;

     var page_count=Math.ceil(len/i);

     var none_unit_width=$('.prolist').width();

     var $parent =$('.prolist_content');

     $('.goRight').click(function () {

         if(page==page_count){

             $parent.animate({left:0},800);

             page=1;

         }else{

             $parent.animate({left:'-='+none_unit_width},800);

             page++;

         }

     });

     $('.goLeft').click(function () {

         if(!$parent.is(':animated')){

             if(page=1){

                 $parent.animate({lefg:'-='+none_unit_width*(page_count-1)},800);

                 page=page_count;

             }else{

                 $parent.animate({left:"+="+none_unit_width},800)

                 page--;

             }

         }

     })

 });

 function scrollNews(obj) {

     var $self=obj.find('ul:first');

     var lineHeight=$self.find('li:first').height();

     $self.animate({'marginTop':-lineHeight+"px"},600,function () {

         $self.css({marginTop:0}).find('li:first').appendTo($self);

     })

 }

 function showImg(index){

     var adHeight=$('.content_right .ad').height();

     $('.slider').stop(true,false).animate({top:-adHeight*index},1000);

     $('.num li').removeClass('on')

         .eq(index).addClass('on');

 }

html代码：

 <!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="scripts/jquery-1.3.1.js" type="text/javascript"></script>

     <script src="scripts/index.js"></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 src="data: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 src="data:images/down.gif" alt="" /></p>

         </div>

     </div>

     <div class="content_right">

         <div class="ad" >

              <ul class="slider" >

                 <li><img src="data:images/ads/1.gif"/></li>

                 <li><img src="data:images/ads/2.gif"/></li>

                 <li><img src="data:images/ads/3.gif"/></li>

                 <li><img src="data:images/ads/4.gif"/></li>

                 <li><img src="data: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="data:images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>

                     </li>

                     <li>

                         <a href="detail.html"><img src="data:images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>

                     </li>

                     <li>

                         <a href="detail.html"><img src="data:images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>

                     </li>

                     <li>

                         <a href="detail.html"><img src="data:images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>

                     </li>

                         <li>

                         <a href="detail.html"><img src="data:images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>

                     </li>

                     <li>

                         <a href="detail.html"><img src="data:images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>

                     </li>

                     <li>

                         <a href="detail.html"><img src="data:images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>

                     </li>

                     <li>

                         <a href="detail.html"><img src="data:images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>

                     </li>

                         <li>

                         <a href="detail.html"><img src="data:images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>

                     </li>

                     <li>

                         <a href="detail.html"><img src="data:images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>

                     </li>

                     <li>

                         <a href="detail.html"><img src="data:images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>

                     </li>

                     <li>

                         <a href="detail.html"><img src="data:images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>

                     </li>

                 </ul>

             </div>

             <p class="module_left_right"><img class="goLeft" src="data:images/left.gif" alt="" /><img class="goRight" src="data:images/right.gif" alt="" /></p>

         </div>

    </div>

 </div>

 <!--主体结束-->

 </body>

 </html>

jquery的商品首页的更多相关文章

基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
jquery实现商品sku多属性选择（商品详情页）
转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果源码 <!DOCTYPE HTML> <ht ...
jQuery实现商品楼层的感觉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jQuery实现商品详情详细参数页面切换
利用index实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
jquery特效商品SKU属性规格选择实时联动
转载,原文链接功能:各种属性的值选中后,SKU填写表格进行变动,对属性.属性值的数量自适应,编辑时不因去掉勾选导致原有值不显示所有代码均属原创,现在共享,如果有更好的实现方式,希望互相交流最终实 ...
商品描述（动画）--- jQuery
本文章实现是基于jQuery展示商品描述的一个功能 (1)鼠标移入显示描述内容,鼠标移开内容隐藏.先来看看一个先后效果. (2)jQuery所以的文件可以自行下载,也可以在我主页找到文件,右键文件名复 ...
js实现商品颜色尺码联动以及购买数量的选择
<script type="text/javascript"> $(function(){ //初始化点击第一个颜色 jquery $("#colors a: ...
《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计
第8章用jQuery打造个性网站做一个购物网站并用jQuery来完善.大体步骤是: 收集素材确定网站结构 A. 文件结构,imagea文件夹用来存放将要用到的图片,styles文件夹存放CSS, ...

随机推荐

由学习《软件设计重构》所想到的代码review（一）
前言对于一个程序猿来讲怎样来最直接的来衡量他的技术能力和产出呢?我想最直观的作法是看他的代码编写能力,就拿我常常接触的一些程序猿来看,他们买了非常多技术重构类书籍.可是看完后代码编写能力并没有显著提 ...
用IIS防止mdb数据库被下载
如何防止mdb数据库被下载?本文讨论的是在服务器端禁止mdb格式数据库文件被下载,而不是在数据库中加入防下载表,将数据库名改为含#号的asp.asa等后缀格式. 下面以IIS6.0为例说明如何在服务器 ...
centos6.x升级glibc-2.17
glibc glibc是GNU发布的libc库,即c运行库.glibc是linux系统中最底层的api,几乎其它任何运行库都会依赖于glibc:它本身也提供了许多其它一些必要功能服务的实现: libc ...
java学习笔记3--类与对象的基础
本文地址:http://www.cnblogs.com/archimedes/p/java-study-note3.html,转载请注明源地址. 1.面向对象的程序设计方法概述面向对象的程序设计与 ...
tomcat7的数据库连接池tomcatjdbc的25个优势
tomcat的JDBC连接池org.apache.tomcat.jdbc.pool更换或替代吗Apache Commons DBCP连接池. 为什么我们须要一个新的连接池? 这里有几个原因: 1.DB ...
xcode的svn和git使用方法
1.创建版本库:(参考:http://blog.csdn.net/itianyi/article/details/8601183) 方法:直接在windows服务器安装VisualSVN Server ...
PHP快速入门如何操作MySQL
1 创建一个新的数据库,注意类型设置为utf8_general_ci 2 在数据库中创建一个新的表,比如叫做tg_user(先从左侧选择刚才创建的数据库) 3 创建第一个字段,自动编号.我们估计网站的 ...
C#控制台下的AO程序
好几年没写过控制台程序了(上一次是大二时写坐标转换时用过),因为我觉得用户难以接受没有良好操作界面的应用程序,我不想偷懒,今天来将应用程序改写为控制台程序,记录一下,忘记的内容: 1.数据的交互不管 ...
Tp框架中模板中if条件如何使用？
MS SQL得到指定日期的当月月末
MS SQL得到指定日期的当月月末 declare @ddate date ,,)) select @ddate --2016-01-31 declare @ddatetime datetime ,, ...

jquery的商品首页

jquery的商品首页的更多相关文章

随机推荐

热门专题