携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

学完前端三件套并且接触到来一点点jquery，你是不是和我一样，感觉jquery和js代码，特别相似，对于每次学习，都想试试自己能不能行，那么我们一起来完成这个商品首页代码吧。

阅读须知：部分js，css并没有写出来，大家可以自行添加。

在写代码之前，我们先对整个页面进行分析，弄清楚该页面有几大模块，每个模块所完成的功能，再进行代码的编写。

需求分析：

xx商城首页所展示的内容主要有以下几个模块。

头部模块
商品分类菜单模块
商城资讯模板模块
轮播图模块
商品列表展示区域模块（带分页）

那么我们就可以按照一个一个块来完成自己项目了。

项目目录结构介绍如下：

easybuy-template
├── images # 图片素材
    ├── ads # 轮播图素材
    ├── pro_img
        ├── product1 # 商品列表展示区域的图片
├── scripts # JS 文件
└── styles # 样式文件
└── index.html # html文件

从头部开始

首先定义一个头部div，id=skin，然后确定商城字样，我们使用空的超链接， <a id="logo" href="#">xx商城</a>然后对于右边的颜色切换模块，我们使用ul，li标签

             **得到这个结果**

那么如何把他变成这样呢？

这个时候新建一个css文件对于背景图片，长宽等，我不细展开。在styles下面新建文件夹skin

这里我们只需要header的，后面两个是后面内容的。但是可以一起加上

对于ul怎么变横向排列可以自己百度。

最关键来了，怎么换颜色？

这当然不是单纯的css，html可以完成的。我们需要定义jquery函数，里面先用var获取我们颜色，就是li标签，然后li触发函数switch 自己重新书写switch函数，里面输入参数名字，我们通过名字点addclass，添加效果

当然在js那边，我们好像可以通过替换css文件，来达到效果，具体可以百度一下，因为我这里最后所有css在一起，不太好演示。

到这里，我们就完成了头部div的所有内容。

接下来就是主体部分，左边有分类和网战消息的侧边栏，右边是图片轮播和商品详情。

先完成产品分类

新建一个div表示主体，再新建一个div表示内容，然后新建一个div代表我们产品分类。里面使用ul，li，在分类li下面，还有新的li

<div>
        <div>      
            <div>
            <h3>产品分类</h3>
            <ul class=>
              <li>
                <span>衬衫</span>
                <ul>
                  <li><span>短袖衬衫</span></li>
                  <li><span>长袖衬衫</span></li>
                </ul>
              </li>
              <li>
                <span>卫衣</span>
                <ul>
                  ..
                </ul>
              </li>
 //////

站内信息

内容div里面再新建一个div，然后使用ulli标签，li里面放超链接。

<div">
            <h3>商城资讯</h3>
            <div>
              <ul>
                <li>
                  <a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红."
                    >甜美宽松毛衣今秋一定红.</a
                  >
                </li>
               .....
            <p class="module_up_down"><img src="images/down.gif" alt="" /></p>
          </div>

然后我们对他们进行我们美化得到这个效果

然后是轮播图。

使用ulli引入图片，然后在当前div再来一个ulli，里面对应12345数字.对于轮播图，恶魔点击这个数字就可以切换图。

window.onload = function init() {

mytime = setInterval("changeImg()", 3000);

}

var i = 1;

function changeImg() {

i++;

document.getElementById("lunbo").src = "../img/sty" + i + ".jpg";

if (i == 4) { i = 0; }

} cursor: PointerEvent;

这个是实现图片轮播的一种方式，但是并没有和下标连系我们这里对轮播图的js是

最后，就是商品详情。同样使用ulli，每个li里面有超链接，图片。类似

          <h3>新款上市</h3>
          <div class="prolist_content">
            <ul>
              <li>
                <a href="detail.html"
                  ><img src="images/pro_img/product1/product1.jpg" alt="" /></a
                ><span>免烫高支棉衬衣1</span><span>$120.00</span>
              </li>
              <li>
              ......

他有效果点击小图，出现大图实现js：先使用切换的图片调用鼠标悬浮的函数，里面新建函数。新建函数里面通过var获取图片对应的src，让获取点，再通过点图片src。

/*点击左侧产品小图片切换大图*/
$(function(){
	$(".pro_detail_left ul li img").livequery("click",function(){ 
		  var imgSrc = $(this).attr("src");
		  var i = imgSrc.lastIndexOf(".");
		  var unit = imgSrc.substring(i);
		  imgSrc = imgSrc.substring(0,i);
		  var imgSrc_small = imgSrc + "_small"+ unit;
		  var imgSrc_big = imgSrc + "_big"+ unit;
		  $("#bigImg").attr({"src": imgSrc_small ,"jqimg": imgSrc_big });
		  $("#thickImg").attr("href", imgSrc_big);
	});
});

然后对应选中的衣服还可以换颜色函数和上面差不多

总体效果图

使用jQuery 特效完成一个网上商城的首页