<body> | |
<div class="box"> | |
<img src="images/login.jpg" alt="每日推荐" title="每日推荐" /> | |
<div class="right"> | |
<ul class="tab_list"> | |
<li data-index="0">限时特惠</li> | |
<li data-index="1" >热卖推荐</li> | |
<li data-index="2">人气新品</li> | |
<li data-index="3">移动电源</li> | |
<li data-index="4">充电器</li> | |
</ul> | |
<ul class="tab_con"> | |
<li> | |
<img src="images/1/1.jpg" alt="" /> | |
<span class="names" | |
>OPPO Find X2 超感官旗舰 3K分辨率 120Hz超感屏 多焦段影像系统 | |
骁龙865 65w闪充 8GB+256GB</span | |
> | |
<span class="price">¥5999.00</span> | |
</li> | |
<li> | |
<img src="images/1/2.jpg" alt="" /> | |
<span class="names" | |
>三星 Galaxy S10(SM-G9730)骁龙855超感屏 超声波屏下指纹 | |
4G手机全网通 双卡双待游戏手机 8GB+1</span | |
> | |
<span class="price">¥4189.00</span> | |
</li> | |
<li> | |
<img src="images/1/3.jpg" alt="" /> | |
<span class="names" | |
>OPPO Find X2 超感官旗舰 3K分辨率 120Hz超感屏 多焦段影像系统 | |
骁龙865 65w闪充 8GB+256GB</span | |
> | |
<span class="price">¥5999.00</span> | |
</li> | |
<li> | |
<img src="images/1/4.jpg" alt="" /> | |
<span class="names" | |
>OPPO Find X2 超感官旗舰 3K分辨率 120Hz超感屏 多焦段影像系统 | |
骁龙865 65w闪充 8GB+256GB</span | |
> | |
<span class="price">¥5999.00</span> | |
</li> | |
<li> | |
<img src="images/1/5.jpg" alt="" /> | |
<span class="names" | |
>OPPO Find X2 超感官旗舰 3K分辨率 120Hz超感屏 多焦段影像系统 | |
骁龙865 65w闪充 8GB+256GB</span | |
> | |
<span class="price">¥5999.00</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</body> | |
<script> | |
//手机信息数组 | |
var conDate1 =[{"imgUrl":"images/1/1.jpg","desc": "OPPO Find X2 超感官旗舰 3K分辨率 120Hz超感屏 多焦段影像系统 骁龙865 65w闪充 8GB+256GB","price":"¥5999.00"}, | |
{"imgUrl":"images/1/2.jpg","desc": "三星 Galaxy S10(SM-G9730)骁龙855超感屏 超声波屏下指纹 4G手机 全网通 双卡双待游戏手机 8GB+1","price":"¥4189.00"}, | |
{"imgUrl":"images/1/3.jpg","desc": "OPPO Find X2 超感官旗舰 3K分辨率 120Hz超感屏 多焦段影像系统 骁龙865 65w闪充 8GB+256GB","price":"¥5999.00"}, | |
{"imgUrl":"images/1/4.jpg","desc": "realme 真我X50 Pro 5G 6400万变焦四摄 双模5G 65W超级闪充 高通骁龙865 90Hz电竞屏 8GB+","price":"¥3599.00"}, | |
{"imgUrl":"images/1/5.jpg","desc": "Apple iPhone XS (A2100) 256GB 银色 移动联通电信4G手机","price":"¥6499.00"} | |
] ; | |
var conDate2 =[{"imgUrl":"images/2/1.jpg","desc": "诺基亚 NOKIA 5310 白红 直板按键 移动联通2G音乐手机 双卡双待 老人手机 学生备用功能机","price":"¥399.00"}, | |
{"imgUrl":"images/2/2.jpg","desc": "魅族16T 三摄拍照大屏娱乐游戏手机 6GB+128G 日光橙 骁龙855 4500mAh大电池 超广角 全网通4G双卡双待","price":"¥1999.00"}, | |
{"imgUrl":"images/2/3.jpg","desc": "Palm智能小手机 62克3.3英寸 IP68防水 移动联通电信 4G备用机 超薄迷你 典雅金","price":"¥1699.00"}, | |
{"imgUrl":"images/2/4.jpg","desc": "OPPO Reno3 Pro 双模5G 视频双防抖 90HZ高感曲面屏 7.7mm轻薄机身 8GB+128GB 日出印象 拍照","price":"¥3999.00"}, | |
{"imgUrl":"images/2/5.jpg","desc": "魅族 X8 拍照游戏智能手机 6GB+64GB 亮黑 AI美颜 骁龙710 全网通4G双卡双待","price":"¥1099.00"} | |
] ; | |
var conDate3 =[{"imgUrl":"images/3/1.jpg","desc": "一加 OnePlus 8 5G旗舰新品 OLED高刷新率屏幕 骁龙865 轻薄手感 超清超广角拍照手机 肉眼可见的出类拔萃","price":"¥9999.00"}, | |
{"imgUrl":"images/3/2.jpg","desc": "OPPO Reno3 双模5G 6400万超清四摄 视频双防抖 7.96mm纤薄机身 8GB+128GB 蓝色星夜全网通拍照","price":"¥3399.00"}, | |
{"imgUrl":"images/3/3.jpg","desc": "realme 真我X50 6400万变焦四摄 双模5G 高通骁龙765G 120Hz电竞屏 前置双摄 8GB+128GB 冰川","price":"¥2499.00"}, | |
{"imgUrl":"images/3/4.jpg","desc": "Palm智能小手机 62克3.3英寸 IP68防水 移动联通电信 4G备用机 超薄迷你 玄武灰","price":"¥1699.00"}, | |
{"imgUrl":"images/3/5.jpg","desc": "Apple iPhone XS (A2100) 256GB 银色 移动联通电信4G手机","price":"¥6499.00"} | |
] ; | |
var conDate4 =[{"imgUrl":"images/4/1.jpg","desc": "罗马仕LT20移动电源20000毫安大容量充电宝 智能数显苹果/安卓/Type-C/小米/华为通用 LT20数显2万毫安","price":"¥79.00"}, | |
{"imgUrl":"images/4/2.jpg","desc": "小米 移动电源3 20000mAh USB-C 双向快充版|可为三台设备同时充电|高品质锂离子聚合物电池","price":"¥129.00"}, | |
{"imgUrl":"images/4/3.jpg","desc": "第一卫(divi) 苹果7P/8P背夹电池 iPhone背夹充电宝大容量移动电源7/8plus充电手机壳轻薄便携7500毫安 黑色","price":"¥139.00"}, | |
{"imgUrl":"images/4/4.jpg","desc": "罗马仕sense6+ 2万毫安时18WPD双向快充充电宝大容量移动电源Type-C输入输出苹果安卓小米手机通用","price":"¥124.90"}, | |
{"imgUrl":"images/4/5.jpg","desc": "18W快充,双向快充,双口输出,高品质锂聚合物电芯【20000mAh双向快充,三台设备同时充电,更大电量点击】(此商品不参加上述活动)","price":"¥79.00"} | |
] ; | |
var conDate5 =[{"imgUrl":"images/5/1.jpg","desc": "华为(HUAWEI)超级快充立式无线充电器(Max 40W)CP62 优雅黑 适配华为P40 Pro,P40 Pro+,Mat","price":"¥299.00"}, | |
{"imgUrl":"images/5/2.jpg","desc": "摩设 苹果数据线手机快充头充电器线USB电源线iPhone11 pro/XS/MAX/6s/7/8P 两米线+12W快充头","price":"¥99.00"}, | |
{"imgUrl":"images/5/3.jpg","desc": "MKY 苹果快充PD套装18W充电器头速冲数据线适用iphone11ProMax/8/X/XS/XR 18W快充头+苹果USB","price":"¥82.00"}, | |
{"imgUrl":"images/5/4.jpg","desc": "倍思 【氮化镓GaN】65W快速充电器2C1A笔记本手机快充华为苹果充电器头PDQC多协议快充 【黑色】65W充电器+100W","price":"¥178.00"}, | |
{"imgUrl":"images/5/5.jpg","desc": "小米 65W单USB-C口PD快充头/充电器/电源适配器| 体积小巧|手机与笔记本、switch皆适配","price":"¥99.00"} | |
] ; | |
//将数组内容输出到页面 | |
var con = document.querySelector(".tab_con"); | |
var list = document.querySelector(".tab_list"); | |
fn(conDate1); | |
list.children[0].style.color = "white"; | |
list.children[0].style.background = "#0893ff"; | |
function fn(array) { | |
con.innerHTML = ""; | |
for (var i in array) { |
js 移动条目
最新推荐文章于 2024-08-30 20:29:15 发布