JavaScript商品详情介绍
JavaScript实现商品详情
·
结果截图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>华硕官网</title>
<link href="css/detail.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/detail.js"></script>
<script src="js/swiper.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<!-- 顶部 -->
<div class="detail">
<div class="content">
<div class="detail_left">
<b>飞行堡垒</b>
<span></span>
<a href="#">飞行堡垒8</a>
</div>
<div class="detail_right">
<a href="">概述</a><span></span>
<a href="">图集</a><span></span>
<a href="">参数</a><span></span>
<a href="">F码通道</a><span></span>
<a href="">用户评价</a>
</div>
</div>
</div>
<!-- 详情 -->
<div class="shop_detail">
<div class="shop_detail_pic">
<div id="box">
<img id="pic" src="img/1.webp" />
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<div class="btn" id="left"> <</div>
<div class="btn" id="right">></div>
</div>
<div style="border: 1px #AAAAAA solid;margin-top: 30px;width: 550px;"></div>
<div style=" width: 550px; height: 700px; ">
<h3 style="margin-left: 200px; margin-top: 20px;"><a href="#">产品图解</a></h3>
<img src="img/1.webp" width="500px" height="400px" />
<img src="img/7.webp" width="150px" height="150px"/>
<img src="img/5.webp" width="150px" height="150px"/>
<img src="img/6.webp" width="150px" height="150px"/>
</div>
</div>
<div class="shop_detail_menu">
<h1>飞行堡垒8</h1>
<p>华硕(ASUS) 飞行堡垒8 FX86/FX95 吃鸡二手笔记本办公游戏设计15.6寸 飞行8 I7-10代/8G/512G/1650Ti</p>
<h2>￥6699</h2>
<div class="detail_map">
<i class="fa fa-map-marker"></i>
<span> 重庆 重庆市 大学城区 虎溪街道 <a href="" style="color: #ff6700;">
修改</a></span><br />
<span style="color: #ff6700;margin-left: 8px;">有现货</span>
</div>
<div class="shop_detail_much">
<p>选择版本</p>
<div class="detail_much_left" id="one1" onclick="toGetContent()">酷睿i5 10300H|GTX 1650Ti<span
data-val="6699">￥6699元</span></div>
<div class="detail_much_left" id="one2">酷睿i5 10300H|GTX 1650<span data-val="5899">￥5899元</span>
</div>
<div class="detail_much_left" id="one3">酷睿i7 10300H|GTX 1650<span data-val="6999">￥6999元</span>
</div>
<div class="detail_much_left" id="one4">酷睿i5 10300H|GTX 1660<span data-val="6699">￥6699元</span>
</div>
<div class="detail_much_left" id="one5">酷睿i7 10300H|GTX 1660<span data-val="7499">￥7499元</span>
</div>
<div class="detail_much_left" id="one6">酷睿i7 10300H|GTX 1660Ti<span data-val="7999">￥7999元</span>
</div>
</div>
<div class="clear"></div>
<div class="shop_detail_color">
<p>选择颜色</p>
<div class="detail_color_left detail_color_left_checked" style="margin-right: 5px;" id="black"><span
style="background: #000;"></span>黑色</div>
<div class="detail_color_left detail_color_left_checked" id="red"><span
style="background: red;"></span>红色</div>
<div class="detail_color_left detail_color_left_checked" style="margin-right: 5px;" id="blue"><span
style="background: blue;"></span>蓝色</div>
<div class="detail_color_left detail_color_left_checked" id="orange"><span
style="background: orange;"></span>橙色</div>
</div>
<div class="clear"></div>
<div class="shop_detail_bz">
<div class="shop_detail_bz0">
<p>京东保障服务</p>
<a href="#">了解保障服务 </a>
<div class="clear"></div>
</div>
<div class="shop_detail_bz1" style="border-bottom: none;">
<span class="fa fa-check-circle shop_detail_button"></span>
<img src="img/pms_1648104623.73339169.jpg" />
<div class="shop_detail_1">
<p style="font-size: 18px;color: #333;">意外保护</p>
<p>意外保护</p>
<b class="fa fa-check-square shop_detail_button"></b>
我已阅读 <a> 服务条款 </a>|<a> 服务条款 </a>
<span data-val="119">119元</span>
</div>
</div>
<div class="clear"></div>
<div class="shop_detail_bz1">
<span class="fa fa-check-circle shop_detail_button"></span>
<img src="img/pms_1648104623.73339169.jpg" />
<div class="shop_detail_1">
<p style="font-size: 18px;color: #333;">延长保修</p>
<p>延长保修</p>
<b class="fa fa-check-square shop_detail_button"></b>
我已阅读 <a> 服务条款 </a>|<a> 服务条款 </a>
<span data-val="79">79元</span>
</div>
</div>
<div class="clear"></div>
<div class="shop_detail_zj">
<div>
<p id="content">酷睿i5 10300H|GTX 1650Ti</p>
<p id="color" style="margin-left: 20px;">黑色</p>
<span id="phonePrice">￥6699元</span>
<div class="clear"></div>
</div>
<p id="totalPrice" style="color: #FF6A00;font-size: 25px;margin-left: 30px;">
总计 : ￥6699元
</p>
</div>
<div class="shop_detail_cart">加入购物车</div>
<p><i class="fa fa-check-circle-o"></i> 七天无理由退货 <i class="fa fa-check-circle-o"></i> 15天质量问题换货
<i class="fa fa-check-circle-o"></i> 365天保修
</p>
</div>
</div>
<div class="clear"></div>
<!-- 底部 -->
<div class="footers">
<div class="footer">
<div class="footer-top_li_1">
<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
<a href="#"><i class="fa fa-rotate-right"></i>7天无理由退货</a><span></span>
<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>
<a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>
<a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>
</div>
<span class="separate"></span>
</div>
</div>
</body>
<script>
//使用替换class名的方法
$(function() {
let content
let color
//默认选中第一个版本和第一个颜色
$('.detail_much_left').eq(0).attr('class', 'detail_much_left checked')
$('.detail_color_left').eq(0).attr('class', 'detail_color_left checked')
//点击选中其他颜色
$('.detail_color_left').click(function(e) {
$('.detail_color_left').attr('class', 'detail_color_left')
$(this).attr('class', 'detail_color_left checked')
updateTotalPrice()
let cid = e.target.id
color = document.getElementById(cid).innerHTML
document.getElementById("color").innerHTML = color
})
//点击选中其他版本
$('.detail_much_left').click(function(e) {
$('.detail_much_left').attr('class', 'detail_much_left')
$(this).attr('class', 'detail_much_left checked')
updateTotalPrice()
let id = e.target.id
content = document.getElementById(id).innerHTML
content = content.split("<")
document.getElementById("content").innerHTML = content[0]
})
//选中提供的保障服务
$('.shop_detail_bz1').click(function() {
var nowCircleClass = $(this).find('.fa-check-circle').attr('class')
var nowClass = $(this).find('.fa-check-square').attr('class')
//判断有没有被选中
if (nowCircleClass.indexOf('checked') > 0) {
//如果被选中,则除移选中
nowCircleClass = nowCircleClass.replace('checked', '')
nowClass = nowClass.replace('checked', '')
$(this).find('.fa-check-circle').attr('class', nowCircleClass)
$(this).find('.fa-check-square').attr('class', nowClass)
} else {
//如果没有被选中,则选中
$(this).find('.fa-check-circle').attr('class', nowCircleClass + 'checked')
$(this).find('.fa-check-square').attr('class', nowClass + 'checked')
}
updateTotalPrice()
})
// 计算总价
function updateTotalPrice() {
//版本价钱
var bbPrice = $(".detail_much_left[class$='checked']").find('span').attr('data-val') * 1
//服务价钱
var svPrice = 0
var svSpan = $(".fa-check-circle[class$='checked']").parent('.shop_detail_bz1').find('span[data-val]')
for (var i = 0; i < svSpan.length; i++) {
svPrice += svSpan[i].getAttribute('data-val') * 1
}
var TotalPrice = bbPrice + svPrice;
$('#totalPrice').html('总计 : ' + TotalPrice + ' 元')
$('#phonePrice').html(bbPrice + ' 元')
}
})
</script>
</html>
轮播图js
window.onload = function() {
var box = document.getElementById("box");
var ul = document.getElementById("list");
var img = document.getElementById("pic");
var left_btn = document.getElementById("left");
var right_btn = document.getElementById("right");
var allLi = document.getElementsByTagName("li");
//第一步 ：第一个按钮设置为红色
var currentNUM = 1;
allLi[0].style.backgroundColor = "red";
//第二步：让图片循环改变
var timer = setInterval(startloop, 2000);
function startloop() {
currentNUM++
changeIMG()
}
function changeIMG() {
if(currentNUM == 0) {
currentNUM = 8;
}
if(currentNUM == 9) {
currentNUM = 1;
}
img.src = "img/" + currentNUM + "图片格式";
//清空小圆点颜色，改变下一个颜色
for(var i = 0; i < allLi.length; i++) {
allLi[i].style.backgroundColor = "#aaa";
}
allLi[currentNUM - 1].style.backgroundColor = "red"; //设置当前的颜色的
};
//第三步：鼠标进入box和离开
box.addEventListener("mouseover", function() {
//左右显示出来
left_btn.style.display = "block";
right_btn.style.display = "block";
window.clearInterval(timer);
}, false);
box.addEventListener("mouseout", function() {
left_btn.style.display = "none";
right_btn.style.display = "none";
timer = setInterval(startloop, 2000);
}, false);
//第四步： 点击左右按钮
left_btn.addEventListener("mouseover", deep, false);
left_btn.addEventListener("mouseout", nodeep, false);
right_btn.addEventListener("mouseover", deep, false);
right_btn.addEventListener("mouseout", nodeep, false);
left_btn.addEventListener("click", function() {
currentNUM--;
changeIMG();
}, false);
right_btn.addEventListener("click", startloop, false);
function deep() {
this.style.backgroundColor = "rgba(0,0,0,0.4)";
};
function nodeep() {
this.style.backgroundColor = "rgba(0,0,0,0.2)";
};
//第五步：小圆点的转换
for(var i = 0; i < allLi.length; i++) {
allLi[i].index = i + 1;
allLi[i].addEventListener("mouseover", function() {
allLi[0].style.backgroundColor = "#aaa"
currentNUM = this.index;
console.log(currentNUM)
changeIMG();
}, false);
}
}css
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #ccc;
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
}
.detail {
width: 100%;
height: 65px;
border-top: 1px solid #ccc;
line-height: 65px;
box-shadow: -3px 5px 10px #eee;
}
.detail_left {
float: left;
}
.detail_right {
float: right;
}
.detail a {
font-size: 10px;
color: #444;
display: inline-block;
}
.detail span {
border-left: 2px solid #ccc;
height: 12px;
margin: 0 7px;
display: inline-block;
}
.shop_detail {
width: 1226px;
margin: 30px auto 0px;
}
.shop_detail_pic {
width: 500px;
height: 600px;
float: left;
margin-left: 10px;
}
.shop_detail_menu {
width: 600px;
float: right;
}
.clear {
clear: both;
}
.shop_detail_menu h1 {
font-size: 27px;
}
.shop_detail_menu p {
font-size: 13px;
color: #ccc;
}
.shop_detail_menu h2 {
font-size: 20px;
color: #ff6700;
border-bottom: 1px solid #ccc;
height: 50px;
line-height: 50px;
}
.detail_map {
width: 558px;
border: 1px solid #ccc;
background: #fafafa;
padding: 30px 10px 30px 30px;
line-height: 20px;
margin: 30px 0px;
font-size: 14px;
}
.shop_detail_much,
.shop_detail_color {
width: 600px;
}
.shop_detail_much p {
font-size: 18px;
color: #333;
margin-bottom: 15px;
}
.shop_detail_much div {
font-size: 15px;
padding: 0px 20px;
float: left;
width: 255px;
height: 50px;
line-height: 50px;
border: 1px solid #ccc;
}
.shop_detail_much span {
float: right;
color: #ccc;
}
.shop_detail_color p {
font-size: 18px;
color: #333;
margin: 15px 0px;
}
.shop_detail_color div {
font-size: 15px;
padding: 0px 20px;
float: left;
width: 255px;
height: 50px;
line-height: 50px;
border: 1px solid #ccc;
text-align: center;
}
.shop_detail_color span {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 8px;
margin-right: 10px;
}
.shop_detail_bz0 p {
font-size: 18px;
color: #333;
margin: 20px 0;
float: left;
}
.shop_detail_bz0 a {
float: right;
color: #ff6700;
margin: 27px 0;
font-size: 13px;
}
.shop_detail_bz1 {
border: 1px solid #ccc;
width: 598px;
height: 150px;
}
.shop_detail_bz1 span {
float: left;
width: 10px;
height: 10px;
line-height: 10px;
display: inline-block;
border-radius: 6px;
margin: 60px 0px;
margin-left: 40px;
}
.shop_detail_bz1 img {
float: left;
margin: 50px 20px;
}
.shop_detail_1 {
margin: 40px 0px;
}
.shop_detail_1 p {
margin-bottom: 10px;
}
.shop_detail_1 b {
width: 10px;
height: 10px;
line-height: 10px;
display: inline-block;
}
.shop_detail_1 span {
float: right;
margin: 0px;
margin-right: 20px;
color: #aaa;
width: 50px;
}
.shop_detail_button {
color: rgba(0, 0, 0, 0);
border: 1px solid #ccc;
}
.shop_detail_zj {
width: 600px;
height: 130px;
background: #f9f9f9;
margin-top: 30px;
}
.shop_detail_zj div {
margin: 0px 30px 20px;
width: 540px;
height: 50px;
line-height: 50px;
}
.shop_detail_zj p {
color: #333;
float: left;
font-size: 15px;
}
.shop_detail_zj span {
color: #333;
float: right;
font-size: 15px;
}
.shop_detail_cart {
width: 300px;
height: 50px;
text-align: center;
line-height: 50px;
background: #FF6700;
font-size: 18px;
margin-top: 30px;
color: #fff;
}
.shop_detail_cart+p {
font-size: 15px;
margin: 20px 0px;
}
/* 替换版本的class样式 */
.shop_detail_menu .checked {
border: 1px solid #ff6700;
}
shop_detail_pic
/* 替换颜色的class样式 */
.shop_detail_color .checked {
border: 1px solid #FF6700;
}
/* 选中服务的class样式 */
.shop_detail_bz1 .checked {
color: #FF6700;
}
.swiper {
border: 3px solid #FF6700;
width: 500px;
height: 900px;
}
#pic {
width: 500px;
height: 600px;
}
//
#box {
width: 790px;
height: 340px;
margin: 0 auto;
position: relative;
}
.btn {
width: 50px;
height: 100px;
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
font-size: 40px;
text-align: center;
line-height: 100px;
position: absolute;
top: 120px;
display: none;
}
#left {
top: 300px;
left: 160px;
}
#right {
top: 300px;
right: 860px;
}
ul {
list-style: none;
position: absolute;
bottom: 20px;
left: 230px;
text-align: center;
}
ul li {
float: left;
width: 20px;
height: 20px;
margin-left: 10px;
background-color: #aaa;
text-align: center;
line-height: 20px;
border-radius: 50%;
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)