华为智能门锁标准版 - AI指纹锁，手机钱包开锁，HarmonyOS猫眼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>华为智能门锁标准版 - AI指纹锁，手机钱包开锁，HarmonyOS猫眼</title>
<link rel="stylesheet" href="css/main.css">
<style>
</style>
<script src="js/jQuery_file.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 获取图片列表
var images = [
"a01.png", "a02.png", "a03.png", "a04.png", "a05.png", "a06.png",
"a07.png", "a08.png", "a09.png", "a10.png", "a11.png", "a12.png"
];
<p>// 给每个缩略图绑定点击事件
$(".photo_list ul li").click(function(){
// 获取点击的缩略图的索引
var index = $(this).index();</p>
<pre><code>// 修改大图的src属性为点击的缩略图的图片地址
$("#photo_pannel .photo img").attr("src", "img/" + images[index]);
</code></pre>
<p>});
});
</script></p>
</head>
<body>
<div id="nav_panel">
<div class="nav"><img src="img/top.png" alt=""></div>
</div>
<div class="position">
< a href="" title="首页">首页</ a>
>
< a href="" title="智能家装">智能家装</ a>
>
< a href="" title="智能门锁">智能门锁</ a>
>
<a id="product_title" href="" title="智能门锁 标准版">智能门锁 标准版</ a>
</div>
<div class="main">
<div id="photo_pannel">
<div class="photo"><img src="img/a01.png" alt=""></div>
<div class="photo_list">
<div class="prev tab"><img src="img/disabled-prev.png" alt=""></div>
<div id="scroll">
<ul>
<li><img src="img/a01.png" alt=""></li>
<li><img src="img/a02.png" alt=""></li>
<li><img src="img/a03.png" alt=""></li>
<li><img src="img/a04.png" alt=""></li>
<li><img src="img/a05.png" alt=""></li>
<li><img src="img/a06.png" alt=""></li>
<li><img src="img/a07.png" alt=""></li>
<li><img src="img/a08.png" alt=""></li>
<li><img src="img/a09.png" alt=""></li>
<li><img src="img/a10.png" alt=""></li>
<li><img src="img/a11.png" alt=""></li>
<li><img src="img/a12.png" alt=""></li>
</ul>
</div>
<div class="next tab"><img src="img/hover-next.png" alt=""></div>
</div>
</div>
<div id="property_pannel">
<div class="title">华为智能门锁 标准版</div>
<div class="desc">AI指纹锁，华为手机钱包钥匙开锁，HarmonyOS分布式猫眼，8800mAh超大容量电池</div>
<div class="price">￥<span>2799</span></div>
<div class="hot">智能门锁系列：<span>拼团最高省500</span><div>></div></div>
<div class="color choose_outer" id="color_panel">
<div class="title">颜色</div>
<div class="choose">
<div class="item black">星际黑</div>
<div class="item gold selected">鎏光金</div>
</div>
</div>
<div class="type choose_outer" id="version_panel">
<div class="title">版本</div>
<div class="choose">
<div class="item">Pro 版<br></比如>3D人脸识别+可视猫眼+指纹解锁</div>
<div class="item">标准版<br>可视猫眼+指纹解锁</div>
</div>
</div>
<div class="service choose_outer">
<div class="title">保障服务</div>
<div class="desc">已有590万位用户加入华为官方保障服务</div>
</div>
<div id="order_panel">
<div class="count">
<div class="count_op" id="count_minus">
<img src="img/minus.png" alt=""></div>
<input type="text" name="" id="product_count" value="1">
<div class="count_op" id="count_add">
<img src="img/add.png" alt="">
</div></div>
<button class="add">加入购物车</button>
<button class="buy">立刻购买</button>
</div>
</div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pCaf 著作权归作者所有。请勿转载和采集!