文章目录

  • 功能简介
  • 项目准备
  • 项目说明
  • 方案一:源代码
    • CSS样式
    • HTML结构
    • JS逻辑
  • 方案二:源代码
    • CSS样式
    • HTML结构
    • JS逻辑

功能简介

页面展示

该项目功能实现:

  1. 无限滚动轮播图

  2. js动态生成列表展示内容

  3. 对列表内服务优惠选项可进行筛选

  4. 对列表实现可按要求进行排序

项目准备

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

  • 模拟数据: 轮播图数据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的serverURLvar 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.切换图片的itemvar currentItemEl = imagesEl.children[currentIndex];var previousItemEl = imagesEl.children[previousIndex];previousItemEl.classList.remove("active");currentItemEl.classList.add("active");// 2.切换指示器的itemvar 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);}// 调用函数 过滤resultListfilterResultListAction();};}// 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.itemvar 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.discountvar discountEl = document.createElement("div");discountEl.classList.add("discount");discountEl.textContent = resultItem.promotionInfo;aEl.append(discountEl);// 创建div.pricevar priceEl = document.createElement("div");priceEl.classList.add("price");priceEl.textContent = "￥" + resultItem.price;aEl.append(priceEl);// 创建div.servicevar serviceEl = document.createElement("div");serviceEl.classList.add("service");// 动态展示数组中的数据for (var lable of resultItem.services) {// 创建span.tipElvar 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中添加三个空的lifor (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的serverURLvar 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.切换指示器的itemvar 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);}// 调用函数 过滤resultListfilterResultListAction();};}// 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.itemvar 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中添加三个空的lifor (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.itemvar 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();

}

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

  1. HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）

    案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

  2. JS简单实现京东网页轮播图

    需要html,css,js, 源代码 HTML <div class="box"> <!-- 左右两个点击按钮 --> <a href="j ...

  3. 史上最简单的无缝衔接轮播图

    网上有大量关于使用原生js编写轮播图的例子,不得不说,他们的文章很棒,但是我发现一个缺点,就是他们的轮播图组件太过于完整,添加了很多按钮功能,代码量较大.掩盖了轮播图的最基本也是最重要的实现原理,很容 ...

  4. HTML5+CSS3+JS小实例：仿制网易云音乐网站的轮播图

    实例:仿制网易云音乐网站的轮播图 技术栈:HTML+CSS+JS 字体图标库:font-awesome 效果: 源码: <!DOCTYPE html> <html><he ...

  5. 纯JS实现带小圆点缩略图及左右箭头的轮播图

    HTML部分 <body> <div id="container"><div id="list" class="pic& ...

  6. 【Html+JS+CSS】简易轮播图核心代码分享 + 效果展示

    目录 直接上代码吧! 简单效果展示 直接上代码吧! Html启动页代码: <!DOCTYPE HTML> <html><head><title>plea ...

  7. 制作轮播图思路 ~ 使用JS做一个轮播图，先在脑海里捋一捋逻辑，我的思路是这样的，看图啦：

    制作一个功能比较全的轮播图,应该怎么下手呢?我的思路比较中规中矩,如果不知道怎么下手的,看看我的思路吧,看完一定要着手试试哦~

  8. 用jq简单的去做一个轮播图

    在生活中我们会经常去在淘宝上购买商品,网页上有一个可以滑动的图片今天我们用jq去做一个轮播图 我们先做好一个盒子和轮播图的一个框架 <div class="zt"> & ...

  9. Android弧形广告图,简单封装弧形广告轮播图（ViewPager+贝塞尔曲线）

    前言 通过ViewPager和贝塞尔曲线实现了一个弧形广告轮播图. 效果图 弧形ViewPager 实现方法 想要实现这个效果,现在几行代码就可以了: Step 1. Add it in your r ...

最新文章

  1. 10-20国际标准导联系统
  2. PHP教程-防止网站被刷票的小技巧
  3. xyz后缀的网站_.XYZ五岁了
  4. Web前端和后端开发的区别和要求
  5. mysql 无法创建视图_mysql无法创建视图怎么办
  6. 华为p40鸿蒙系统价格有好高,华为P40Pro参数逐步被确定，鸿蒙系统或成最大亮点，价格更给力！...
  7. 如何做数据库分页查询
  8. 3.2配置自定义的路径映射
  9. 【优化算法】动物迁徙优化算法（AMO）【含Matlab源码 1806期】
  10. Lingo基础语法笔记
  11. 免流发展史-三大运营商
  12. 海康摄像头忘记密码，自己如何快速重置密码
  13. 将日/分钟数据转为周线、月线或其他周期
  14. B站纪录片发布会，发布的不只是纪录片
  15. linux 串口操作
  16. DEDE自动调用轮播图/幻灯片
  17. 一套ASP.NET优惠券领取微信小程序源码（前台+后台）
  18. error LINK:1181 无法打开lib文件
  19. 无人机、手持全景设备、单反制作全景的基础流程，及全景成果与地图融合
  20. 百果园“两驾马车、三根支柱”商业模式大揭秘

热门文章

  1. Python Django 基于 Redis做实时排行榜和排名
  2. 人工智能在无人驾驶中的应用
  3. mathtype一步将word自带的公式编辑器的公式换成mathtype类型
  4. MySQL---数据库从入门走向大神系列(十)-Connection对象池、装饰模式与动态代理模式
  5. 2021.2.23课程摘要（逻辑教育-王劲胜）
  6. 达特茅斯学院计算机科学专业,2020年达特茅斯学院排名TFE Times美国最佳计算机科学硕士专业排名第42...
  7. linux文件权限前面的r是什么意思,文件权限：普通(r、w、x)和特殊(s、t)
  8. 案例：同程凤凰缓存系统基于Redis的设计与实践。
  9. 详解B树、B+树、B*树
  10. 电脑桌面图标变成白色图标如何处理