原生JS仿造华为商城案例-实现了简单页面-两种轮播图思路的实现-动态展示数据

文章目录

功能简介

页面展示

该项目功能实现:

无限滚动轮播图
js动态生成列表展示内容
对列表内服务优惠选项可进行筛选
对列表实现可按要求进行排序

项目准备

项目中使用的模拟数据, 代替网络请求

模拟数据: 轮播图数据js代码

var banners = [
  {
    "actionUrlWap": "",
    "actionUrlWeb": "https://www.vmall.com/portal/activity/index.html?pn=zhuhuichangpc",
    "actonUrl": "",
    "bgColor": "#ED2E35",
    "dataSourceCode": "DB000044",
    "dataSourceType": "ad",
    "id": 20533,
    "imgUrl": "/uomcdn/CN/cms/202202/F1B873739558FB5D1059099F4220ABA4.jpg",
    "imgWebpUrlMap": {
      "webp_1": "/uomcdn/CN/cms/202202/F1B873739558FB5D1059099F4220ABA4.jpg.25.webp",
      "webp_2": "/uomcdn/CN/cms/202202/F1B873739558FB5D1059099F4220ABA4.jpg.50.webp",
      "webp_3": "/uomcdn/CN/cms/202202/F1B873739558FB5D1059099F4220ABA4.jpg.75.webp",
      "webp_4": "/uomcdn/CN/cms/202202/F1B873739558FB5D1059099F4220ABA4.jpg.webp"
    },
    "tagSelected": "{}",
    "title": "主"
  },
  {
    "actionUrlWap": "",
    "actionUrlWeb": "https://www.vmall.com/portal/activity/index.html?pn=huaweizonePC",
    "actonUrl": "",
    "bgColor": "#ED2E35",
    "dataSourceCode": "DB000044",
    "dataSourceType": "ad",
    "id": 17691,
    "imgUrl": "/uomcdn/CN/cms/202202/9B8652362711564FEB2B33793250D8B9.png",
    "imgWebpUrlMap": {
      "webp_1": "/uomcdn/CN/cms/202202/9B8652362711564FEB2B33793250D8B9.png.25.webp",
      "webp_2": "/uomcdn/CN/cms/202202/9B8652362711564FEB2B33793250D8B9.png.50.webp",
      "webp_3": "/uomcdn/CN/cms/202202/9B8652362711564FEB2B33793250D8B9.png.75.webp",
      "webp_4": "/uomcdn/CN/cms/202202/9B8652362711564FEB2B33793250D8B9.png.webp"
    },
    "tagSelected": "{}",
    "title": "华为"
  },
  {
    "actionUrlWap": "",
    "actionUrlWeb": "https://www.vmall.com/portal/activity/index.html?pageId=401022361",
    "actonUrl": "",
    "bgColor": "#ED2E35",
    "dataSourceCode": "DB000044",
    "dataSourceType": "ad",
    "id": 839,
    "imgUrl": "/uomcdn/CN/cms/202202/55338EF54406E2D3D6FAC2BF6C9D231D.png",
    "imgWebpUrlMap": {
      "webp_1": "/uomcdn/CN/cms/202202/55338EF54406E2D3D6FAC2BF6C9D231D.png.25.webp",
      "webp_2": "/uomcdn/CN/cms/202202/55338EF54406E2D3D6FAC2BF6C9D231D.png.50.webp",
      "webp_3": "/uomcdn/CN/cms/202202/55338EF54406E2D3D6FAC2BF6C9D231D.png.75.webp",
      "webp_4": "/uomcdn/CN/cms/202202/55338EF54406E2D3D6FAC2BF6C9D231D.png.webp"
    },
    "tagSelected": "{}",
    "title": "教育办公"
  },
  {
    "actionUrlMp": "",
    "actionUrlWap": "",
    "actionUrlWeb": "https://www.vmall.com/portal/activity/index.html?pn=harmonyosconnectpc",
    "actonUrl": "",
    "bgColor": "#ED2E35",
    "dataSourceCode": "DB000044",
    "dataSourceType": "ad",
    "id": 29135,
    "imgUrl": "/uomcdn/CN/cms/202202/B53ABB8B90DC11AABDDE6F379FF57866.png",
    "imgWebpUrlMap": {
      "webp_1": "/uomcdn/CN/cms/202202/B53ABB8B90DC11AABDDE6F379FF57866.png.25.webp",
      "webp_2": "/uomcdn/CN/cms/202202/B53ABB8B90DC11AABDDE6F379FF57866.png.50.webp",
      "webp_3": "/uomcdn/CN/cms/202202/B53ABB8B90DC11AABDDE6F379FF57866.png.75.webp",
      "webp_4": "/uomcdn/CN/cms/202202/B53ABB8B90DC11AABDDE6F379FF57866.png.webp"
    },
    "tagSelected": "{}",
    "title": "行业"
  },
  {
    "actionUrlWap": "",
    "actionUrlWeb": "https://www.vmall.com/portal/activity/index.html?pn=zhixuanpc",
    "actonUrl": "",
    "bgColor": "#ED2E35",
    "dataSourceCode": "DB000044",
    "dataSourceType": "ad",
    "id": 9059,
    "imgUrl": "/uomcdn/CN/cms/202202/15550D184131C453A2CED9E443AEDDF8.jpg",
    "imgWebpUrlMap": {
      "webp_1": "/uomcdn/CN/cms/202202/15550D184131C453A2CED9E443AEDDF8.jpg.25.webp",
      "webp_2": "/uomcdn/CN/cms/202202/15550D184131C453A2CED9E443AEDDF8.jpg.50.webp",
      "webp_3": "/uomcdn/CN/cms/202202/15550D184131C453A2CED9E443AEDDF8.jpg.75.webp",
      "webp_4": "/uomcdn/CN/cms/202202/15550D184131C453A2CED9E443AEDDF8.jpg.webp"
    },
    "tagSelected": "{}",
    "title": "智选"
  },
  {
    "actionUrlWap": "",
    "actionUrlWeb": "https://www.vmall.com/portal/activity/index.html?pn=zhcxaitoweb",
    "actonUrl": "",
    "bgColor": "#ED2E35",
    "dataSourceCode": "DB000044",
    "dataSourceType": "ad",
    "id": 18893,
    "imgUrl": "/uomcdn/CN/cms/202201/3E994BF010D07F8CD8E8B445514A06F5.png",
    "imgWebpUrlMap": {
      "webp_1": "/uomcdn/CN/cms/202201/3E994BF010D07F8CD8E8B445514A06F5.png.25.webp",
      "webp_2": "/uomcdn/CN/cms/202201/3E994BF010D07F8CD8E8B445514A06F5.png.50.webp",
      "webp_3": "/uomcdn/CN/cms/202201/3E994BF010D07F8CD8E8B445514A06F5.png.75.webp",
      "webp_4": "/uomcdn/CN/cms/202201/3E994BF010D07F8CD8E8B445514A06F5.png.webp"
    },
    "tagSelected": "{}",
    "title": "AITO"
  },
  {
    "actionUrlMp": "",
    "actionUrlWap": "",
    "actionUrlWeb": "https://www.vmall.com/portal/activity/index.html?pageId=401021384",
    "actonUrl": "",
    "bgColor": "#ED2E35",
    "dataSourceCode": "DB000044",
    "dataSourceType": "ad",
    "id": 29439,
    "imgUrl": "/uomcdn/CN/cms/202202/B1726D36C05F0486A3D07605F34A4C7D.png",
    "imgWebpUrlMap": {
      "webp_1": "/uomcdn/CN/cms/202202/B1726D36C05F0486A3D07605F34A4C7D.png.25.webp",
      "webp_2": "/uomcdn/CN/cms/202202/B1726D36C05F0486A3D07605F34A4C7D.png.50.webp",
      "webp_3": "/uomcdn/CN/cms/202202/B1726D36C05F0486A3D07605F34A4C7D.png.75.webp",
      "webp_4": "/uomcdn/CN/cms/202202/B1726D36C05F0486A3D07605F34A4C7D.png.webp"
    },
    "tagSelected": "{}",
    "title": "智慧办公"
  },
  {
    "actionUrlWap": "",
    "actionUrlWeb": "https://www.vmall.com/portal/activity/index.html?pageId=301002069",
    "actonUrl": "",
    "bgColor": "#ED2E35",
    "dataSourceCode": "DB000044",
    "dataSourceType": "ad",
    "id": 19369,
    "imgUrl": "/uomcdn/CN/cms/202202/083AA2A10A88835A2BE7A786DC18F85F.jpg",
    "imgWebpUrlMap": {
      "webp_1": "/uomcdn/CN/cms/202202/083AA2A10A88835A2BE7A786DC18F85F.jpg.25.webp",
      "webp_2": "/uomcdn/CN/cms/202202/083AA2A10A88835A2BE7A786DC18F85F.jpg.50.webp",
      "webp_3": "/uomcdn/CN/cms/202202/083AA2A10A88835A2BE7A786DC18F85F.jpg.75.webp",
      "webp_4": "/uomcdn/CN/cms/202202/083AA2A10A88835A2BE7A786DC18F85F.jpg.webp"
    },
    "tagSelected": "{}",
    "title": "莫塞尔"
  }
]

模拟数据: 展示列表数据js代码

var resultList = [
  {
    "briefName": "HUAWEI MateBook E 12.6英寸",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "96",
    "isInv": 1,
    "mobileVideoPath": "",
    "name": "HUAWEI MateBook E 12.6英寸",
    "photoName": "3007F35C1B59029E58A4AE3098AC7E02mp.jpg",
    "photoPath": "/uomcdn/CN/pms/202112/displayProduct/10086765396129/",
    "picture3DPath": "",
    "price": 6499,
    "priceAccurate": 6499,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086765396129,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订立省300元|12期免息",
    "rateCount": 3190,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010088403",
    "skuCount": 6,
    "skuName": "【磁吸键盘套装】HUAWEI MateBook E 2022款二合一笔记本 11代酷睿 i5 16G 512G Win11 12.6英寸 OLED原色全面屏 多设备互联 星际蓝",
    "webVideoPath": "",
    "services": [
      "仅看有货"
    ]
  },
  {
    "briefName": "HUAWEI MateBook 14s",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayTags": "热销爆款",
    "displayToCustomer": "0",
    "goodRate": "95",
    "isInv": 1,
    "mobileVideoPath": "https://vod.vmall.com/asset/bbe93206e5d086880f87f994c57428b9/play_video/f7de0a3ad7021d22ad70161c8f3e1d11_2.mp4",
    "name": "HUAWEI MateBook 14s",
    "photoName": "E57FFE1FF4B1FE19D48F93E3D98439BDmp.jpg",
    "photoPath": "/uomcdn/CN/pms/202112/displayProduct/10086088858159/",
    "picture3DPath": "",
    "price": 6699,
    "priceAccurate": 6699,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086088858159,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订立省400元",
    "rateCount": 3327,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010080208",
    "skuCount": 6,
    "skuName": "HUAWEI MateBook 14s 14.2英寸 11代酷睿标压处理器 i5 16GB 512GB 2.5K触控全面屏 90Hz高刷 锐炬显卡 乐享App 多设备互联 轻薄笔记本 云杉绿",
    "tagBgColor": "FF6A6E",
    "webVideoPath": "https://vod.vmall.com/asset/bbe93206e5d086880f87f994c57428b9/play_video/f7de0a3ad7021d22ad70161c8f3e1d11_2.mp4",
    "services": [
      "仅看有货",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI PixLab X1 黑白激光打印机",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "96",
    "isInv": 1,
    "mobileVideoPath": "https://vod.vmall.com/asset/9c044103e5c783bd17323e53a643ed3c/play_video/a94107f5055c8297dcefbfa9a02a3ca0_2.mp4",
    "name": "HUAWEI PixLab X1 黑白激光打印机",
    "photoName": "D1BA03B40ACBDE152A51E93ACE23DA9A227EE48AB3606C39mp.png",
    "photoPath": "/product/6941487237746/",
    "picture3DPath": "",
    "price": 1899,
    "priceAccurate": 1899,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086478166035,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订立省400元",
    "rateCount": 2734,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "3102150348801",
    "skuCount": 1,
    "skuName": "【新品】华为黑白激光多功能打印机 HUAWEI PixLab X1 HarmonyOS 靠近配网 一碰打印 复印扫描",
    "webVideoPath": "https://vod.vmall.com/asset/9c044103e5c783bd17323e53a643ed3c/play_video/a94107f5055c8297dcefbfa9a02a3ca0_2.mp4",
    "services": [
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateBook 14 2021款",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "94",
    "isInv": 1,
    "mobileVideoPath": "https://vod.vmall.com/asset/5a78d2cbfc1e8bfa0b89d1bdf7847e8d/play_video/82d48481f2da3f9cf71f86152a21c398_2.mp4",
    "name": "HUAWEI MateBook 14 2021款",
    "photoName": "0586DDD43A796BB8F9DCE0CF38A3C248212C18CA891A2AB9mp.png",
    "photoPath": "/product/6941487210565/",
    "picture3DPath": "",
    "price": 5699,
    "priceAccurate": 5699,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086549931177,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订最高省400元",
    "rateCount": 4163,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010061733",
    "skuCount": 7,
    "skuName": "HUAWEI MateBook 14 2021款 i5 16GB 512GB（深空灰）锐炬显卡 触控屏 11代酷睿处理器 14英寸2K护眼全面屏轻薄笔记本",
    "webVideoPath": "https://vod.vmall.com/asset/5a78d2cbfc1e8bfa0b89d1bdf7847e8d/play_video/82d48481f2da3f9cf71f86152a21c398_2.mp4",
    "services": [
      "仅看有货",
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateBook X Pro 2021款",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "97",
    "isInv": 1,
    "mobileVideoPath": "https://vod.vmall.com/asset/f3cdc6af7392602c47d4d5c49a87af12/play_video/bdcee2ce27b4f25888281d54e05738a7_2.mp4",
    "name": "HUAWEI MateBook X Pro 2021款",
    "photoName": "C3B4EDC1CBDB58C859ED06B23B852CD1mp.jpg",
    "photoPath": "/uomcdn/CN/pms/202112/displayProduct/10086857314109/",
    "picture3DPath": "",
    "price": 10999,
    "priceAccurate": 10999,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086857314109,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "尊享12期免息",
    "rateCount": 6029,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010057233",
    "skuCount": 3,
    "skuName": "HUAWEI MateBook X Pro 2021款 i7 16GB 1TB（深空灰）锐炬显卡 13.9英寸3K高清触控屏 11代酷睿处理器 商务轻薄笔记本",
    "webVideoPath": "https://vod.vmall.com/asset/f3cdc6af7392602c47d4d5c49a87af12/play_video/bdcee2ce27b4f25888281d54e05738a7_2.mp4",
    "services": [
      "仅看有货",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateBook 13 2021款",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "95",
    "isInv": 1,
    "mobileVideoPath": "https://vod.vmall.com/asset/fb588aa94c2eb9bad7ef80ea909927d7/play_video/0ce23ff7d645e17774dc59b1a4d0d561_2.mp4",
    "name": "HUAWEI MateBook 13 2021款",
    "photoName": "3DABF5539F6B25DF426191D94B8D8415FAA73E1C8681C940mp.png",
    "photoPath": "/product/6941487236411/",
    "picture3DPath": "",
    "price": 5199,
    "priceAccurate": 5199,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086294084142,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订立省200元",
    "rateCount": 2297,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010059937",
    "skuCount": 6,
    "skuName": "HUAWEI MateBook 13 2021款 i5 16GB 512GB（银）2K炫丽全面屏 11代酷睿处理器13英寸轻薄笔记本",
    "webVideoPath": "https://vod.vmall.com/asset/fb588aa94c2eb9bad7ef80ea909927d7/play_video/0ce23ff7d645e17774dc59b1a4d0d561_2.mp4",
    "services": [
      "仅看有货",
      "分期免息",
    ]
  },
  {
    "briefName": "HUAWEI MateBook 16",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "96",
    "isInv": 1,
    "mobileVideoPath": "",
    "name": "HUAWEI MateBook 16",
    "photoName": "C04874409C2D9D32DCB5FBBF82A1EE62F137D0F1ECAB38ABmp.png",
    "photoPath": "/product/6941487221462/",
    "picture3DPath": "",
    "price": 6599,
    "priceAccurate": 6599,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086475813571,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订立省300元",
    "rateCount": 1503,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010066607",
    "skuCount": 4,
    "skuName": "【新品】HUAWEI MateBook 16 R7 16GB 512GB（灰）Windows 11 16英寸2.5K专业全面屏 标压处理器 轻薄高性能笔记本",
    "webVideoPath": "",
    "services": [
      "仅看有货",
      "分期免息"
    ]
  },
  {
    "briefName": "HUAWEI MateBook 14 2021款 锐龙版",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "96",
    "isInv": 1,
    "mobileVideoPath": "",
    "name": "HUAWEI MateBook 14 2021款 锐龙版",
    "photoName": "64810357D54DF471C801127244440EF1mp.jpg",
    "photoPath": "/uomcdn/CN/pms/202112/displayProduct/10086210747193/",
    "picture3DPath": "",
    "price": 6299,
    "priceAccurate": 6299,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086210747193,
    "promoLabels": [
      "限时特价",
      "分期免息",
      "赠送积分"
    ],
    "promoPrice": 5599,
    "promoPriceAccurate": 5599,
    "promotionInfo": "预订立省700元",
    "rateCount": 1011,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010086204",
    "skuCount": 4,
    "skuName": "【新品】HUAWEI MateBook 14 2021 锐龙版 R7 16G 512G（深空灰）2K触控全面屏 14英寸轻薄本",
    "webVideoPath": "",
    "services": [
      "仅看有货",
      "分期免息"
    ]
  },
  {
    "briefName": "HUAWEI MateBook 13s",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "94",
    "isInv": 1,
    "mobileVideoPath": "https://vod.vmall.com/asset/bbe93206e5d086880f87f994c57428b9/play_video/f7de0a3ad7021d22ad70161c8f3e1d11_2.mp4",
    "name": "HUAWEI MateBook 13s",
    "photoName": "489E4F53219E6909E7A7F49FABA605D6C60C0B53F1DA152Amp.png",
    "photoPath": "/product/6941487233809/",
    "picture3DPath": "",
    "price": 6499,
    "priceAccurate": 6499,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086845419415,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订立省500元",
    "rateCount": 1228,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010079901",
    "skuCount": 4,
    "skuName": "【新品】HUAWEI MateBook 13s 13.4英寸 11代酷睿标压处理器 i5 16G 512G  2.5K触控全面屏  90Hz高刷 锐炬显卡 乐享App 多设备互联 轻薄笔记本 皓月银",
    "webVideoPath": "https://vod.vmall.com/asset/bbe93206e5d086880f87f994c57428b9/play_video/f7de0a3ad7021d22ad70161c8f3e1d11_2.mp4",
    "services": [
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI Matebook X 2021款",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "93",
    "isInv": 1,
    "mobileVideoPath": "https://vod.vmall.com/asset/97058dcb06ffb0e4bb545a295b6b96c7/play_video/f3c2ece4fef62a1fa88c3d39e42ee616_2.mp4",
    "name": "HUAWEI Matebook X 2021款",
    "photoName": "6E52FE5AD52A2106A11D6D894FCB12F04E037A1519BF7E05mp.png",
    "photoPath": "/product/6941487215461/",
    "picture3DPath": "",
    "price": 6999,
    "priceAccurate": 6999,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086715572678,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订立省200元",
    "rateCount": 190,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010083804",
    "skuCount": 6,
    "skuName": "【新品】HUAWEI MateBook X 2021款13英寸 11代酷睿 i5 16GB 512GB（冰霜银）3K触控全面屏 轻至1kg 多屏协同 4扬声器环绕音效 轻薄笔记本",
    "webVideoPath": "https://vod.vmall.com/asset/97058dcb06ffb0e4bb545a295b6b96c7/play_video/f3c2ece4fef62a1fa88c3d39e42ee616_2.mp4",
    "services": [
      "仅看有货",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateView",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "97",
    "isInv": 1,
    "mobileVideoPath": "",
    "name": "HUAWEI MateView",
    "photoName": "83863676E551FCB7E3FBF673B61B8979EF4A923BA06F4475mp.png",
    "photoPath": "/product/6941487222872/",
    "picture3DPath": "",
    "price": 3999,
    "priceAccurate": 3999,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086690832694,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订立省200元",
    "rateCount": 1210,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "34020000502",
    "skuCount": 2,
    "skuName": "【无线投屏版】HUAWEI MateView 28.2英寸 原色显示器 4K+ 超高清分辨率  电影级色域  94%高屏占比  3:2 屏幕比例 支持华为手机一碰投屏 65W Type-C反向充电",
    "webVideoPath": "",
    "services": [
      "仅看有货",
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateView GT 27英寸",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "96",
    "isInv": 1,
    "mobileVideoPath": "https://vod.vmall.com/asset/12defa62ac19c232e27eb7d33ad632e7/play_video/25081b882872f4c5a78e79a21e673704_2.mp4",
    "name": "HUAWEI MateView GT 27英寸",
    "photoName": "91B768F89D6CBB0B25384A645603CBD8mp.png",
    "photoPath": "/uomcdn/CN/pms/202202/gbom/6941487232963/",
    "picture3DPath": "",
    "price": 2099,
    "priceAccurate": 2099,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086419944776,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订最高省500元",
    "rateCount": 561,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "4602010001501",
    "skuCount": 2,
    "skuName": "HUAWEI MateView GT 27英寸2K超清曲面屏 165Hz刷新率90% P3色域 低蓝光无频闪莱茵护眼认证（无HDMI线缆）",
    "webVideoPath": "https://vod.vmall.com/asset/12defa62ac19c232e27eb7d33ad632e7/play_video/25081b882872f4c5a78e79a21e673704_2.mp4",
    "services": [
      "仅看有货",
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateStation S 锐龙版",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "96",
    "isInv": 1,
    "mobileVideoPath": "",
    "name": "HUAWEI MateStation S 锐龙版",
    "photoName": "F91D2C8C6DF7A0D2E50CAD4C3ACFE42Dmp.png",
    "photoPath": "/uomcdn/CN/pms/202204/sbom/4601010000304/",
    "picture3DPath": "",
    "price": 4998,
    "priceAccurate": 4998,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086469978892,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订最高省900元",
    "rateCount": 1043,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "4601010000304",
    "skuCount": 4,
    "skuName": "【搭配显示器套装】HUAWEI MateStation S 小机箱台式机 7nm锐龙六核R5-4600G 8GB+512GB 多设备高效协同 一键指纹开机解锁 满载28分贝智慧风冷系统 Win10三年保修+华为显示器 S24（含HDMI线）",
    "webVideoPath": "",
    "services": [
      "仅看有货",
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateView GT 34英寸",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "97",
    "isInv": 1,
    "mobileVideoPath": "https://vod.vmall.com/asset/dd43fc2a20f3ccb66571c125d306110c/play_video/7a4bb69d530e09dcab8f0d68e9fc579b_3.mp4",
    "name": "HUAWEI MateView GT 34英寸",
    "photoName": "CAA6012E4EAA262252BC8FDA4960985Bmp.png",
    "photoPath": "/uomcdn/CN/pms/202202/gbom/6941487222858/",
    "picture3DPath": "",
    "price": 2699,
    "priceAccurate": 2699,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086632258266,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订最高省600",
    "rateCount": 783,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "34020001601",
    "skuCount": 2,
    "skuName": "HUAWEI MateView GT 34英寸曲面显示器 3K高清分辨率 21:9 屏幕比例 165Hz电竞刷新率 电影级色域 沉浸式环绕大屏游戏显示器（无HDMI线缆）",
    "webVideoPath": "https://vod.vmall.com/asset/dd43fc2a20f3ccb66571c125d306110c/play_video/7a4bb69d530e09dcab8f0d68e9fc579b_0.mp4",
    "services": [
      "仅看有货",
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateStation X",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "97",
    "isInv": 1,
    "mobileVideoPath": "https://vod.vmall.com/asset/a04fcf17048c946079ff773fcefcdf39/play_video/a2adc8c3286e40cb1b5a7d99bbc3fe87_2.mp4",
    "name": "HUAWEI MateStation X",
    "photoName": "2CD097D65993F90E35A97E381D9209CBBADCD3750D50113Amp.png",
    "photoPath": "/product/6941487244263/",
    "picture3DPath": "",
    "price": 9999,
    "priceAccurate": 9999,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086246464159,
    "promoLabels": [
      "分期免息",
      "赠送积分"
    ],
    "promotionInfo": "预订立省500元",
    "rateCount": 478,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "4603010000204",
    "skuCount": 5,
    "skuName": "HUAWEI MateStation X一体机 28.2英寸十点触控全面屏 锐龙R5 5600H 16GB+512GB 金属机身 多设备高效协同 一键指纹开机解锁 皓月银",
    "webVideoPath": "https://vod.vmall.com/asset/a04fcf17048c946079ff773fcefcdf39/play_video/a2adc8c3286e40cb1b5a7d99bbc3fe87_2.mp4",
    "services": [
      "仅看有货",
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "华为显示器 S24",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "98",
    "isInv": 1,
    "mobileVideoPath": "https://vod.vmall.com/asset/97c05bb2c5473dd6a3ca91a7dcfd79af/play_video/756e5358ce7ef06af4bee3eab40b1a5a.mp4",
    "name": "华为显示器 S24",
    "photoName": "6B581A9746E3803B97C3408045F9C661F1C91B431E9E72F6mp.png",
    "photoPath": "/product/6941487222834/",
    "picture3DPath": "",
    "price": 999,
    "priceAccurate": 999,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086839196289,
    "promoLabels": [
      "赠送积分"
    ],
    "promotionInfo": "预订立省230元",
    "rateCount": 1869,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "34020008701",
    "skuCount": 1,
    "skuName": "华为显示器 S24（灰色）全面屏高清办公显示器 窄边框90%屏占比 75Hz刷新率 顺滑画面 畅爽体验",
    "webVideoPath": "https://vod.vmall.com/asset/97c05bb2c5473dd6a3ca91a7dcfd79af/play_video/756e5358ce7ef06af4bee3eab40b1a5a.mp4",
    "services": [
      "仅看有货",
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateBook B3-420",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "100",
    "isInv": 1,
    "mobileVideoPath": "",
    "name": "HUAWEI MateBook B3-420",
    "photoName": "C87F6C546FEBC02F0A3931780657D7095AEDE8CC5BE5C793mp.png",
    "photoPath": "/product/6941487217120/",
    "picture3DPath": "",
    "price": 5199,
    "priceAccurate": 5199,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086700131130,
    "promoLabels": [
      "赠送积分"
    ],
    "promotionInfo": "批量采购享优惠",
    "rateCount": 0,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010075804",
    "skuCount": 6,
    "skuName": "[三年保修 三年专家上门] HUAWEI MateBook B3-420 2021 i5 8GB 512GB 深空灰 45% NTSC色域 14英寸 商用笔记本",
    "webVideoPath": "",
    "services": [
      "仅看有货",
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateStation B515 台式机",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "100",
    "isInv": 1,
    "mobileVideoPath": "",
    "name": "HUAWEI MateStation B515 台式机",
    "photoName": "2309E3EAC19408D03275BEF025D245DBmp.png",
    "photoPath": "/uomcdn/CN/pms/202205/gbom/6941487207497/",
    "picture3DPath": "",
    "price": 3799,
    "priceAccurate": 3799,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086092274209,
    "promoLabels": [
      "赠送积分"
    ],
    "promotionInfo": "批量采购享优惠",
    "rateCount": 3,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "34010000301",
    "skuCount": 7,
    "skuName": "[三年保修 三年专家上门] HUAWEI MateStation B515 小机箱 集显 R5-4600G 8GB 1TB HDD 有线键盘 有线鼠标（黑色） 商用台式机",
    "webVideoPath": "",
    "services": [
      "仅看有货",
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateBook B7",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "100",
    "isInv": 1,
    "mobileVideoPath": "",
    "name": "HUAWEI MateBook B7",
    "photoName": "475AE7EE1684FFA352EE92B05E9C5E60739B1F87791D1EBCmp.png",
    "photoPath": "/product/6941487222780/",
    "picture3DPath": "",
    "price": 9599,
    "priceAccurate": 9599,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086967025187,
    "promoLabels": [
      "赠送积分"
    ],
    "promotionInfo": "",
    "rateCount": 0,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010076101",
    "skuCount": 3,
    "skuName": "[三年保修 三年专家上门] HUAWEI MateBook B7 2021 i5 16GB 512GB 深空灰 13.9英寸 商用笔记本",
    "webVideoPath": "",
    "services": [
      "仅看有货",
      "分期免息",
      "优惠商品"
    ]
  },
  {
    "briefName": "HUAWEI MateBook B5-430",
    "buttonMode": "1",
    "carrierCode": "VMALL-HUAWEIDEVICE",
    "currencyUnit": "",
    "displayToCustomer": "0",
    "goodRate": "100",
    "isInv": 1,
    "mobileVideoPath": "",
    "name": "HUAWEI MateBook B5-430",
    "photoName": "F25E2E42E8CE4FC87D4DBA2CC3441C7C698586AAFCE6FFFDmp.png",
    "photoPath": "/product/6941487231874/",
    "picture3DPath": "",
    "price": 6599,
    "priceAccurate": 6599,
    "priceLabel": 1,
    "priceMode": 1,
    "productId": 10086829728173,
    "promoLabels": [
      "赠送积分"
    ],
    "promotionInfo": "批量采购享优惠",
    "rateCount": 0,
    "shopH5Url": "https://m.vmall.com/sc/shop/index.html?carrierCode=VMALL-HUAWEIDEVICE",
    "shopMobileUrl": "vmall://com.vmall.client/shop/home?carrierCode=VMALL-HUAWEIDEVICE",
    "shopName": "华为商城自营",
    "skuCode": "2801010076001",
    "skuCount": 6,
    "skuName": "[三年保修 三年专家上门] HUAWEI MateBook B5-430 2021 i5 8GB 512GB 深空灰 14英寸 商用笔记本",
    "webVideoPath": "",
    "services": [
      "仅看有货",
      "分期免息",
      "优惠商品"
    ]
  }
]

重置的CSS样式

* {
  margin: 0;
  padding: 0;
}

ul, li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #333;
}

img {
  vertical-align: top;
}

公共CSS样式

body {
  color: #333;
  font-size: 14px;
  background-color: #f5f5f5;
}

.wrapper {
  width: 1200px;
  margin: 0 auto;
}

项目说明

项目中我实现了两种动态展示列表的方案以及两种轮播图的设计思路(无限滚动轮播图和淡入淡出轮播图)

方案一: 实现淡入淡出轮播图, 生成动态列表时, 使用原生js操作DOM生成, 过程略显繁琐, 好处是可以直接操作元素中的对应事件

方案二: 实现无限滚动轮播图, 生成动态列表时, 使用innerHTML以及模板字符串拼接而成, 缺点就是不能直接操作列表中的元素, 添加事件不方便

方案一:源代码

CSS样式

/* -------------------轮播图展示部分------------------- */
.banner {
  position: relative;
}

.banner .images {
  position: relative;
  height: 550px;
}

.banner .images .item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1000ms ease;
}

.banner .images .item.active {
  opacity: 1;
}

.banner .images .item img {
  position: relative;
  left: 50%;
  transform: translate(-50%);

  width: 1920px;
  height: 550px;
}

.banner .control .btn {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  padding-top: 18px;
  border-radius: 50%;
  border: 0px solid black;
  text-align: center;
  background: rgba(0, 0, 0, .2);
  cursor: pointer;
}

.banner .control .btn:hover {
  background: rgba(0, 0, 0, .3);
}

.banner .control .prev {
  left: 50px;
}

.banner .control .next {
  right: 50px;
}

.banner .control .btn img {
  width: 24px;
  height: 24px;
}

.banner .indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  display: flex;
  justify-content: center;
}

.banner .indicator .item {
  width: 8px;
  height: 8px;
  margin: 0 8px;
  border-radius: 50%;
  background-color: #aaa;
  cursor: pointer;
}

.banner .indicator .item.active {
  background-color: red;
}

/* -------------------商品展示部分------------------- */
.crumbs {
  height: 63px;
  line-height: 63px;
  font-size: 12px;
}

.crumbs .item {
  cursor: pointer;
}

.crumbs .item:last-child {
  color: #000;
}

/* -------------------对内容进行筛选操作------------------- */
.opreation {
  padding: 0 24px;
  background-color: #fff;
}

.opreation .row {
  display: flex;
}

.opreation .row .item {
  width: 104px;
  height: 48px;
  color: #000;
  line-height: 48px;
  font-size: 12px;
  cursor: pointer;
}

.opreation .row .item.active {
  color: red;
}

.opreation .row .item:first-child {
  color: #666;
  cursor: auto;
}

/* -------------------商品列表部分------------------- */
.products {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.products .item {
  width: 291px;
  background-color: #fff;
  margin-bottom: 12px;
}

.products > .item:hover {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1);
}

.products > .item.empty {
  height: 0;
}

.products .item a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.products .item a .album {
  width: 180px;
  height: 180px;
  margin: 30px 0;
}

.products .item a .name {
  font-weight: 700;
  color: #000;
}

.products .item a .discount {
  height: 19px;
  color: #777;
  margin: 10px 0 16px;
}

.products .item a .price {
  color: #c72f3e;

  font-size: 16px;
  font-weight: 700;
}

.products .item .service {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.products .item .service .tip {
  margin: 0 3px;
  padding: 0 3px;
  border: 1px solid #c72f3e;
  border-radius: 3px;
  color: #c72f3e;
  font-size: 12px;
}

.products .item .commont {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.products .item .commont span{
  margin: 0 5px;
  font-size: 12px;
  color: #555;
}

HTML结构

<!-- 轮播图展示部分 -->
<div class="banner">
  <ul class="images"></ul>
  <div class="control">
    <span class="btn prev">
      <img src="./img/left.svg" alt="" />
    </span>
    <span class="btn next">
      <img src="./img/right.svg" alt="" />
    </span>
  </div>
  <div class="indicator"></div>
</div>

<!-- 商品展示部分 -->
<div class="wrapper">
  <!-- 面包屑导航 -->
  <div class="crumbs">
    <span class="item">首页</span>
    <span>&gt;</span>
    <span class="item">笔记本</span>
  </div>

  <!-- 对内容进行筛选操作 -->
  <div class="opreation">
    <ul class="row category">
      <li class="item">分类：</li>
      <li class="item">笔记本</li>
      <li class="item">台式机</li>
      <li class="item">智慧屏</li>
    </ul>
    <ul class="row discount">
      <li class="item">服务优惠：</li>
      <li class="item">仅看有货</li>
      <li class="item">分期免息</li>
      <li class="item">优惠商品</li>
    </ul>
    <ul class="row sort">
      <li class="item">排序：</li>
      <li class="item active" data-key="default">综合</li>
      <li class="item" data-key="goodRate">好评</li>
      <li class="item" data-key="rateCount">评论数</li>
      <li class="item" data-key="price">价格</li>
    </ul>
  </div>

  <!-- 商品列表部分 -->
  <ul class="products">
    <!-- <li class="item">
      <a href="#">
        <img class="album" src="./img/product_01.webp" alt="" />
        <div class="name">SDAJKDHLvkdvn</div>
        <div class="discount">撒复活卡就是复活卡时间</div>
        <div class="price">￥6499</div>
        <div class="service">
          <span class="tip">分期免息</span>
          <span class="tip">赠送积分</span>
        </div>
        <div class="commont">
          <span>3190评价</span>
          <span>96%好评</span>
        </div>
      </a>
    </li> -->
  </ul>
</div>

JS逻辑

<script src="./json/banner_data.js"></script>
<script src="./json/peoduct_data.js"></script>
<script>
  // 一、轮播图展示部分
  // 0.banner的serverURL
  var bannerServerURL = "https://res.vmallres.com/";
  var bannersCount = banners.length;

  // 1.根据数据 动态添加页面内容
  // 1.1动态添加轮播图图片数据
  var imagesEl = document.querySelector(".images");
  var activeItemEl = null;
  for (var i = 0; i < banners.length; i++) {
    // 获取数据
    var banner = banners[i];

    // 创建li元素
    var itemEl = document.createElement("li");
    itemEl.classList.add("item");
    if (i === 0) {
      itemEl.classList.add("active");
      activeItemEl = itemEl;
    }
    imagesEl.append(itemEl);

    // 创建img元素
    var imgEl = document.createElement("img");
    imgEl.src = `${bannerServerURL}${banner.imgUrl}`;
    itemEl.append(imgEl);
  }

  // 1.2动态添加指示器
  var indicatorEl = document.querySelector(".indicator");
  for (var i = 0; i < bannersCount; i++) {
    var intItemEl = document.createElement("div");
    intItemEl.classList.add("item");
    if (i === 0) {
      intItemEl.classList.add("active");
    }
    // 监听指示器的点击
    intItemEl.index = i;
    intItemEl.onclick = function () {
      previousIndex = currentIndex;
      currentIndex = this.index;
      switchBannerItem();
    };

    indicatorEl.append(intItemEl);
  }

  // 2.点击按钮切换轮播图
  var previousIndex = 0; // 记录前一个图片索引
  var currentIndex = 0; // 记录当前图片的索引
  var prevBtnEl = document.querySelector(".prev");
  var nextBtnEl = document.querySelector(".next");
  prevBtnEl.onclick = function () {
    previousIndex = currentIndex;
    currentIndex--;

    if (currentIndex < 0) {
      currentIndex = bannersCount - 1;
    }

    // 调用函数切换active状态
    switchBannerItem();
  };
  nextBtnEl.onclick = nextBannerItem;

  // 3.实现自动轮播功能
  var timerId = 0;
  startTimer();

  // 4.手指进入 停止轮播图 离开播放轮播图
  var bannerEl = document.querySelector(".banner");
  bannerEl.onmouseenter = stopTimer;
  bannerEl.onmouseleave = startTimer;

  // 封装函数:切换active状态
  function switchBannerItem() {
    // 让currentIndex变成active状态 previousIndex移除active状态
    // 1.切换图片的item
    var currentItemEl = imagesEl.children[currentIndex];
    var previousItemEl = imagesEl.children[previousIndex];
    previousItemEl.classList.remove("active");
    currentItemEl.classList.add("active");

    // 2.切换指示器的item
    var currentIntItem = indicatorEl.children[currentIndex];
    var previousIntItem = indicatorEl.children[previousIndex];
    previousIntItem.classList.remove("active");
    currentIntItem.classList.add("active");
  }
  // 封装函数: 播放下一个
  function nextBannerItem() {
    previousIndex = currentIndex;
    currentIndex++;
    if (currentIndex === bannersCount) {
      currentIndex = 0;
    }

    // 调用函数切换active状态
    switchBannerItem();
  }

  // 封装函数:
  // 开启自动播放轮播图
  function startTimer() {
    timerId = setInterval(nextBannerItem, 3000);
  }
  // 关闭自动播放轮播图
  function stopTimer() {
    clearInterval(timerId);
  }

  // 二、商品列表展示部分
  // 0.图片资源服务器的地址
  var baseURL = "https://res.vmallres.com/pimages";

  // 获取元素
  var productsEl = document.querySelector(".products");

  // 2.服务优惠的筛选
  var opreationEl = document.querySelector(".opreation");
  var discountEl = opreationEl.querySelector(".discount");

  var discountFilters = [];

  // 为服务优惠中循环绑定事件
  for (var i = 1; i < discountEl.children.length; i++) {
    var discountItem = discountEl.children[i];
    discountItem.onclick = function () {
      // 在active和非active中进行切换
      this.classList.toggle("active");

      // 将当前点击元素的文本去除左右空格 并保存在变量中
      var fliterItem = this.textContent.trim();

      // 判断数组中 是否有当前点击元素的文本 没有就追加到数组中, 有就删除
      if (!discountFilters.includes(fliterItem)) {
        discountFilters.push(fliterItem);
      } else {
        // 获取当前点击元素在数组中的索引
        var filterIndex = discountFilters.findIndex(function (item) {
          return item === fliterItem;
        });
        discountFilters.splice(filterIndex, 1);
      }

      // 调用函数 过滤resultList
      filterResultListAction();
    };
  }

  // 3.监听排序功能
  var sortEl = document.querySelector(".sort");
  var activeItemEl = sortEl.querySelector(".active");
  for (var i = 1; i < sortEl.children.length; i++) {
    var sortItemEl = sortEl.children[i];

    sortItemEl.index = i;
    sortItemEl.onclick = function () {
      // 排他思想
      activeItemEl.classList.remove("active");
      this.classList.add("active");
      activeItemEl = this;

      // 获取信息
      var sortKey = this.dataset.key;

      // 根据key对数据做排序
      sortResultListAction(sortKey);
    };
  }

  // 封装函数: 用于过滤resultList的数据
  var showResultList = resultList;
  function filterResultListAction() {
    // 过滤数据
    showResultList = resultList.filter(function (item) {
      var isFlag = true;
      for (var fliterItem of discountFilters) {
        if (!item.services.includes(fliterItem)) {
          isFlag = false;
          break;
        }
      }
      return isFlag;
    });

    // 重新展示数据
    showResultListAction();
  }

  // 封装函数:for循环动态展示商品列表
  showResultListAction();
  function showResultListAction() {
    productsEl.innerHTML = "";
    for (var i = 0; i < showResultList.length; i++) {
      // 获取一条数据
      var resultItem = showResultList[i];

      var serviceString = "";
      for (label of resultItem.promoLabels) {
        serviceString += `<span class="tip">${label}</span>`;
      }

      // 创建一个li.item
      var itemEl = document.createElement("li");
      itemEl.classList.add("item");
      // 将li添加到ul中
      productsEl.append(itemEl);

      // 创建a元素
      var aEl = document.createElement("a");
      aEl.href = "#";
      // 将a元素添加到li中
      itemEl.append(aEl);

      // 创建img元素
      var albumEl = document.createElement("img");
      albumEl.classList.add("album");
      albumEl.src = `${baseURL}${resultItem.photoPath}428_428_${resultItem.photoName}`;
      aEl.append(albumEl);

      // 创建div.name元素
      var nameEl = document.createElement("div");
      nameEl.classList.add("name");
      nameEl.textContent = resultItem.name;
      aEl.append(nameEl);

      // 创建div.discount
      var discountEl = document.createElement("div");
      discountEl.classList.add("discount");
      discountEl.textContent = resultItem.promotionInfo;
      aEl.append(discountEl);

      // 创建div.price
      var priceEl = document.createElement("div");
      priceEl.classList.add("price");
      priceEl.textContent = "￥" + resultItem.price;
      aEl.append(priceEl);

      // 创建div.service
      var serviceEl = document.createElement("div");
      serviceEl.classList.add("service");
      // 动态展示数组中的数据
      for (var lable of resultItem.services) {
        // 创建span.tipEl
        var tipEl = document.createElement("span");
        tipEl.classList.add("tip");
        tipEl.textContent = lable;
        serviceEl.append(tipEl);
      }
      aEl.append(serviceEl);

      // 创建div.commont元素
      var commontEl = document.createElement("div");
      commontEl.classList.add("commont");
      // 创建评论元素
      var countEl = document.createElement("span");
      countEl.textContent = `${resultItem.rateCount}人评论`;
      commontEl.append(countEl);
      // 创建好评
      var goodEl = document.createElement("span");
      goodEl.textContent = `${resultItem.goodRate}% 好评`;
      commontEl.append(goodEl);
      aEl.append(commontEl);
    }

    // 向ul中添加三个空的li
    for (var i = 0; i < 3; i++) {
      var itemEl = document.createElement("li");
      itemEl.classList.add("item");
      itemEl.classList.add("empty");
      productsEl.append(itemEl);
    }
  }

  // 封装函数通过key做排序
  function sortResultListAction(key) {
    if (key === "default") {
      filterResultListAction();
    } else {
      showResultList.sort(function (item1, item2) {
        return item2[key] - item1[key];
      });
    }

    showResultListAction();
  }
</script>

方案二:源代码

CSS样式

/* -------------------轮播图展示部分------------------- */
.banner {
  position: relative;
  overflow: hidden;
}

.banner .images {
  position: relative;
  height: 550px;
  transition: all 500ms ease;
}

.banner .images .item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
}

.banner .images .item img {
  position: relative;
  left: 50%;
  transform: translate(-50%);

  width: 1920px;
  height: 550px;
}

.banner .control .btn {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  padding-top: 18px;
  border-radius: 50%;
  border: 0px solid black;
  text-align: center;
  background: rgba(0, 0, 0, .2);
  cursor: pointer;
}

.banner .control .btn:hover {
  background: rgba(0, 0, 0, .3);
}

.banner .control .prev {
  left: 50px;
}

.banner .control .next {
  right: 50px;
}

.banner .control .btn img {
  width: 24px;
  height: 24px;
}

.banner .indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  display: flex;
  justify-content: center;
}

.banner .indicator .item {
  width: 8px;
  height: 8px;
  margin: 0 10px;
  border-radius: 50%;
  background-color: #aaa;
  cursor: pointer;
}

.banner .indicator .item.active {
  background-color: red;
}

/* -------------------商品展示部分------------------- */
.crumbs {
  height: 63px;
  line-height: 63px;
  font-size: 12px;
}

.crumbs .item {
  cursor: pointer;
}

.crumbs .item:last-child {
  color: #000;
}

/* -------------------对内容进行筛选操作------------------- */
.opreation {
  padding: 0 24px;
  background-color: #fff;
}

.opreation .row {
  display: flex;
}

.opreation .row .item {
  width: 104px;
  height: 48px;
  color: #000;
  line-height: 48px;
  font-size: 12px;
  cursor: pointer;
}

.opreation .row .item.active {
  color: red;
}

.opreation .row .item:first-child {
  color: #666;
  cursor: auto;
}

/* -------------------商品列表部分------------------- */
.products {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.products .item {
  width: 291px;
  background-color: #fff;
  margin-bottom: 12px;
}

.products > .item:hover {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1);
}

.products > .item.empty {
  height: 0;
}

.products .item a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.products .item a .album {
  width: 180px;
  height: 180px;
  margin: 30px 0;
}

.products .item a .name {
  font-weight: 700;
  color: #000;
}

.products .item a .discount {
  height: 19px;
  color: #777;
  margin: 10px 0 16px;
}

.products .item a .price {
  color: #c72f3e;

  font-size: 16px;
  font-weight: 700;
}

.products .item .service {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.products .item .service .tip {
  margin: 0 3px;
  padding: 0 3px;
  border: 1px solid #c72f3e;
  border-radius: 3px;
  color: #c72f3e;
  font-size: 12px;
}

.products .item .commont {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.products .item .commont span{
  margin: 0 5px;
  font-size: 12px;
  color: #555;
}

HTML结构

<!-- 轮播图展示部分 -->
<div class="banner">
  <ul class="images"></ul>
  <div class="control">
    <span class="btn prev">
      <img src="./img/left.svg" alt="" />
    </span>
    <span class="btn next">
      <img src="./img/right.svg" alt="" />
    </span>
  </div>
  <div class="indicator"></div>
</div>

<!-- 商品展示部分 -->
<div class="wrapper">
  <!-- 面包屑导航 -->
  <div class="crumbs">
    <span class="item">首页</span>
    <span>&gt;</span>
    <span class="item">笔记本</span>
  </div>

  <!-- 对内容进行筛选操作 -->
  <div class="opreation">
    <ul class="row category">
      <li class="item">分类：</li>
      <li class="item">笔记本</li>
      <li class="item">台式机</li>
      <li class="item">智慧屏</li>
    </ul>
    <ul class="row discount">
      <li class="item">服务优惠：</li>
      <li class="item">仅看有货</li>
      <li class="item">分期免息</li>
      <li class="item">优惠商品</li>
    </ul>
    <ul class="row sort">
      <li class="item">排序：</li>
      <li class="item active" data-key="default">综合</li>
      <li class="item" data-key="goodRate">好评</li>
      <li class="item" data-key="rateCount">评论数</li>
      <li class="item" data-key="price">价格</li>
    </ul>
  </div>

  <!-- 商品列表部分 -->
  <ul class="products">
    <!-- <li class="item">
      <a href="#">
        <img class="album" src="./img/product_01.webp" alt="" />
        <div class="name">SDAJKDHLvkdvn</div>
        <div class="discount">撒复活卡就是复活卡时间</div>
        <div class="price">￥6499</div>
        <div class="service">
          <span class="tip">分期免息</span>
          <span class="tip">赠送积分</span>
        </div>
        <div class="commont">
          <span>3190评价</span>
          <span>96%好评</span>
        </div>
      </a>
    </li> -->
  </ul>
</div>

JS逻辑

<!-- 将模拟数据引入 -->
<script src="./json/banner_data.js"></script>
<script src="./json/peoduct_data.js"></script>
<script>
  // 一、轮播图展示部分
  // 0.banner的serverURL
  var bannerServerURL = "https://res.vmallres.com/";
  var bannersCount = banners.length;
  var anmitionTime = 500;

  // 1.根据数据 动态添加页面内容
  // 1.1动态添加轮播图图片数据
  var imagesEl = document.querySelector(".images");
  var activeItemEl = null;
  for (var i = 0; i < banners.length; i++) {
    // 获取数据
    var banner = banners[i];

    // 创建li元素
    var itemEl = document.createElement("li");
    itemEl.classList.add("item");
    if (i === 0) {
      itemEl.classList.add("active");
      activeItemEl = itemEl;
    }
    imagesEl.append(itemEl);
    // 设置itemEl的样式
    itemEl.style.left = `${100 * i}%`;

    // 创建img元素
    var imgEl = document.createElement("img");
    imgEl.src = `${bannerServerURL}${banner.imgUrl}`;
    itemEl.append(imgEl);
  }

  // 追加元素(无限轮播) 在最后和最前面分别追加一个元素
  var firstItem = imagesEl.children[0].cloneNode(true);
  var lastItem = imagesEl.children[bannersCount - 1].cloneNode(true);
  // 将克隆的第一个元素追加到最后
  imagesEl.append(firstItem);
  // 将克隆的最后一个元素追加到最前
  imagesEl.prepend(lastItem);
  // 位置调整
  lastItem.style.left = "-100%";
  firstItem.style.left = `${bannersCount * 100}%`;

  // 1.2动态添加指示器
  var indicatorEl = document.querySelector(".indicator");
  for (var i = 0; i < bannersCount; i++) {
    var intItemEl = document.createElement("div");
    intItemEl.classList.add("item");
    if (i === 0) {
      intItemEl.classList.add("active");
    }
    // 监听指示器的点击
    intItemEl.index = i;
    intItemEl.onclick = function () {
      previousIndex = currentIndex;
      currentIndex = this.index;
      switchBannerItem();
    };

    indicatorEl.append(intItemEl);
  }

  // 2.点击按钮切换轮播图
  var previousIndex = 0; // 记录前一个图片索引
  var currentIndex = 0; // 记录当前图片的索引
  var prevBtnEl = document.querySelector(".prev");
  var nextBtnEl = document.querySelector(".next");
  prevBtnEl.onclick = function () {
    previousIndex = currentIndex;
    currentIndex--;

    // 调用函数切换active状态
    switchBannerItem();
  };
  nextBtnEl.onclick = nextBannerItem;

  // 3.实现自动轮播功能
  var timerId = 0;
  startTimer();

  // 4.手指进入 停止轮播图 离开播放轮播图
  var bannerEl = document.querySelector(".banner");
  bannerEl.onmouseenter = stopTimer;
  bannerEl.onmouseleave = startTimer;

  // 封装函数:切换active状态
  function switchBannerItem() {
    // 让currentIndex变成active状态 previousIndex移除active状态
    // 1.切换整个imagesEl的transform
    // 恢复动画
    imagesEl.style.transition = `all ${anmitionTime}ms ease`;
    imagesEl.style.transform = `translateX(${-currentIndex * 100}%)`;

    if (currentIndex === bannersCount) {
      currentIndex = 0;
      fixBannerPosition();
    } else if (currentIndex < 0) {
      currentIndex = bannersCount - 1;
      // 调用位置修正函数
      fixBannerPosition();
    }

    // 2.切换指示器的item
    var currentIntItem = indicatorEl.children[currentIndex];
    var previousIntItem = indicatorEl.children[previousIndex];
    previousIntItem.classList.remove("active");
    currentIntItem.classList.add("active");
  }
  // 封装函数: 播放下一个
  function nextBannerItem() {
    previousIndex = currentIndex;
    currentIndex++;

    // 调用函数切换active状态
    switchBannerItem();
  }

  // 封装函数:
  // 开启自动播放轮播图
  function startTimer() {
    if (timerId) return;
    timerId = setInterval(nextBannerItem, 3000);
  }
  // 关闭自动播放轮播图
  function stopTimer() {
    if (!timerId) return;
    clearInterval(timerId);
    timerId = null;
  }

  // 封装函数:修正位移的位置
  function fixBannerPosition() {
    setTimeout(function () {
      // 将动画取消
      imagesEl.style.transition = "none";
      imagesEl.style.transform = `translateX(${-currentIndex * 100}%)`;
    }, anmitionTime);
  }

  // 判断文档是否可见 可见是开启定时器, 不可见时关闭定时器
  document.onvisibilitychange = function () {
    if (document.visibilityState === "hidden") {
      stopTimer();
    } else {
      startTimer();
    }
  };

  // 二、商品列表展示部分
  // 0.图片资源服务器的地址
  var baseURL = "https://res.vmallres.com/pimages";

  // 获取元素
  var productsEl = document.querySelector(".products");

  // 2.服务优惠的筛选
  var opreationEl = document.querySelector(".opreation");
  var discountEl = opreationEl.querySelector(".discount");

  var discountFilters = [];

  // 为服务优惠中循环绑定事件
  for (var i = 1; i < discountEl.children.length; i++) {
    var discountItem = discountEl.children[i];
    discountItem.onclick = function () {
      // 在active和非active中进行切换
      this.classList.toggle("active");

      // 将当前点击元素的文本去除左右空格 并保存在变量中
      var fliterItem = this.textContent.trim();

      // 判断数组中 是否有当前点击元素的文本 没有就追加到数组中, 有就删除
      if (!discountFilters.includes(fliterItem)) {
        discountFilters.push(fliterItem);
      } else {
        // 获取当前点击元素在数组中的索引
        var filterIndex = discountFilters.findIndex(function (item) {
          return item === fliterItem;
        });
        discountFilters.splice(filterIndex, 1);
      }

      // 调用函数 过滤resultList
      filterResultListAction();
    };
  }

  // 3.监听排序功能
  var sortEl = document.querySelector(".sort");
  var activeItemEl = sortEl.querySelector(".active");
  for (var i = 1; i < sortEl.children.length; i++) {
    var sortItemEl = sortEl.children[i];

    sortItemEl.index = i;
    sortItemEl.onclick = function () {
      // 排他思想
      activeItemEl.classList.remove("active");
      this.classList.add("active");
      activeItemEl = this;

      // 获取信息
      var sortKey = this.dataset.key;

      // 根据key对数据做排序
      sortResultListAction(sortKey);
    };
  }

  // 封装函数: 用于过滤resultList的数据
  var showResultList = [].concat(resultList);
  function filterResultListAction() {
    // 过滤数据
    showResultList = resultList.filter(function (item) {
      var isFlag = true;
      for (var fliterItem of discountFilters) {
        if (!item.services.includes(fliterItem)) {
          isFlag = false;
          break;
        }
      }
      return isFlag;
    });

    // 重新展示数据
    showResultListAction();
  }

  // 封装函数:for循环动态展示商品列表
  showResultListAction();
  function showResultListAction() {
    productsEl.innerHTML = "";
    for (var i = 0; i < showResultList.length; i++) {
      // 获取一条数据
      var resultItem = showResultList[i];

      var serviceString = "";
      for (label of resultItem.promoLabels) {
        serviceString += `<span class="tip">${label}</span>`;
      }

      // 创建一个li.item
      var itemEl = document.createElement("li");
      itemEl.classList.add("item");
      itemEl.innerHTML = `
      <a href="#">
        <img class="album" src="${baseURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt="" />
        <div class="name">${resultItem.name}</div>
        <div class="discount">${resultItem.promotionInfo}</div>
        <div class="price">￥${resultItem.price}</div>
        <div class="service">
          ${serviceString}
        </div>
        <div class="commont">
          <span>${resultItem.rateCount}人评论</span>
          <span>${resultItem.goodRate}% 好评</span>
        </div>
      </a>
    `;
      // 将li添加到ul中
      productsEl.append(itemEl);
    }

    // 向ul中添加三个空的li
    for (var i = 0; i < 3; i++) {
      var itemEl = document.createElement("li");
      itemEl.classList.add("item");
      itemEl.classList.add("empty");
      productsEl.append(itemEl);
    }
  }

  // 封装函数通过key做排序
  function sortResultListAction(key) {
    if (key === "default") {
      filterResultListAction();
    } else {
      showResultList.sort(function (item1, item2) {
        return item2[key] - item1[key];
      });
    }

    showResultListAction();
  }
</script>

sultList的数据
var showResultList = [].concat(resultList);
function filterResultListAction() {
// 过滤数据
showResultList = resultList.filter(function (item) {
var isFlag = true;
for (var fliterItem of discountFilters) {
if (!item.services.includes(fliterItem)) {
isFlag = false;
break;
}
}
return isFlag;
});

// 重新展示数据
showResultListAction();

}

// 封装函数:for循环动态展示商品列表
showResultListAction();
function showResultListAction() {
productsEl.innerHTML = “”;
for (var i = 0; i < showResultList.length; i++) {
// 获取一条数据
var resultItem = showResultList[i];

  var serviceString = "";
  for (label of resultItem.promoLabels) {
    serviceString += `<span class="tip">${label}</span>`;
  }

  // 创建一个li.item
  var itemEl = document.createElement("li");
  itemEl.classList.add("item");
  itemEl.innerHTML = `
  <a href="#">
    <img class="album" src="${baseURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt="" />
    <div class="name">${resultItem.name}</div>
    <div class="discount">${resultItem.promotionInfo}</div>
    <div class="price">￥${resultItem.price}</div>
    <div class="service">
      ${serviceString}
    </div>
    <div class="commont">
      <span>${resultItem.rateCount}人评论</span>
      <span>${resultItem.goodRate}% 好评</span>
    </div>
  </a>
`;
  // 将li添加到ul中
  productsEl.append(itemEl);
}

// 向ul中添加三个空的li
for (var i = 0; i < 3; i++) {
  var itemEl = document.createElement("li");
  itemEl.classList.add("item");
  itemEl.classList.add("empty");
  productsEl.append(itemEl);
}

}

// 封装函数通过key做排序
function sortResultListAction(key) {
if (key === “default”) {
filterResultListAction();
} else {
showResultList.sort(function (item1, item2) {
return item2[key] – item1[key];
});
}