华为智能门锁 标准版 - 星际黑/鎏光金，AI指纹解锁，可视猫眼，8800mAh超大容量电池
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>华为智能门锁</title>
<link rel="stylesheet" href="css/main.css">
<style>
</style>
<script src="js/jQuery.js"></script>
<script type="text/javascript">
$(function() {
$("#count_add").click(function() {
var index = $("#product_count").val();
index++;
if (index >= 10) {
index = 10;
}
$("#product_count").val(index);
});
$("#count_minus").click(function() {
var index = $("#product_count").val();
index--;
if (index <= 0) {
index = 1;
}
$("#product_count").val(index);
});
<pre><code> var data = [{
"name": "星际黑",
"version": [{
"name": "Pro 版 3D人脸识别+可视猫眼+指纹解锁",
"price": 3699,
},
{
"name": "标准版 可视猫眼+指纹解锁",
"price": 2499
},
],
"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"
]
},
{
"name": "鎏光金",
"version": [{
"name": "Pro 版 3D人脸识别+可视猫眼+指纹解锁",
"price": 3999
},
{
"name": "标准版 可视猫眼+指纹解锁",
"price": 2799
}
],
"images": ["b01.png", "b02.png", "b03.png", "b04.png", "b05.png", "b06.png", "b07.png",
"b08.png"
]
}
];
$("div[class='item gold selected']").removeClass("selected");
$("div[class='item black']").addClass("selected");
$("#scroll ul").html("");
var blackimgs = data[0].images;
$.each(blackimgs, function(i, v) {
$("#scroll ul").append(`<li><img src="img/${v}" alt=""></li>`);
});
$("div[class='photo']").find("img").attr("src", "img/" + blackimgs[0]);
var colorIndex = 0;
var divs = $("#color_panel .choose").find("div");
$(divs).click(function() {
$(this).siblings().removeClass("selected");
$(this).addClass("selected");
colorIndex = $(this).index();
var blackimgs = data[colorIndex].images;
$("#scroll ul").html("");
$.each(blackimgs, function(i, v) {
$("#scroll ul").append(`<li><img src="img/${v}" alt=""></li>`);
});
$("div[class='photo']").find("img").attr("src", "img/" + blackimgs[0]);
var obj = data[colorIndex];
var versionIndex = $("#version_panel .choose").find("div.selected").index();
$("#property_pannel .price").find("span").html(obj.version[versionIndex].price);
});
var versionIndex = 0;
var divs = $("#version_panel .choose").find("div");
$(divs).click(function() {
$(this).siblings().removeClass("selected");
$(this).addClass("selected");
$("#property_pannel").children("div:first-child").html($(this).html());
versionIndex = $(this).index();
var obj = data[colorIndex];
$("#property_pannel .price").find("span").html(obj.version[versionIndex].price);
});
var page = 1;
var i = 5.35;
$("div[class='next tab']").on('click', function() {
var show = $(".photo_list ul");
var width = show.find("img").width() * i;
var len = show.find("li").length;
console.log(len);
var page_count = Math.ceil(len / i);
if (!show.is(":animated")) {
if (page == page_count) {
show.animate({
left: '0px'
}, "show");
page = 1;
} else {
show.animate({
left: '-=' + width
}, "show");
page++;
}
}
});
$("#scroll img").on('click', function() {
var imgpath = $(this).attr("src");
$("div[class='photo']").find("img").attr("src", imgpath);
});
});
</script>
</head>
<body>
<div id="nav_panel">
<div class="nav"><img src="img/top.png" alt=""></div>
</div>
<div class="position">
<a href="" title="首页">首页</a>
&gt;
<a href="" title="智能家装">智能家装</a>
&gt;
<a href="" title="智能门锁">智能门锁</a>
&gt;
<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>&gt;</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>
</code></pre>
</html>
原文地址: http://www.cveoy.top/t/topic/pFnh 著作权归作者所有。请勿转载和采集!