js 移动条目

最新推荐文章于 2024-08-30 20:29:15 发布

心匙

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量41

点赞数

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_53386534/article/details/128790859

版权

	<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) {