购物车

css/logshoppingcar/shopcar.css

@@ -1,119 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-}
-li {
-  list-style: none;
-}
-a {
-  text-decoration: none;
-}
-section {
-  height: 1200px;
-  background-color: #f5f5f5;
-}
-
-section .whole {
-  padding: 15px 50px;
-  margin: auto;
-}
-
-section .whole .whole-1 {
-  margin: 20px auto;
-  width: 1200px;
-  padding: 25px;
-}
-
-section .whole .whole-1 .all {
-  display: inline-block;
-}
-
-section .whole .whole-1 .all h2 {
-  font-weight: 600;
-  color: #cb1919;
-  float: left;
-  padding-bottom: 10px;
-}
-
-section .whole .whole-1 .opt {
-  border-top: 2px solid #cb1919;
-}
-
-section .whole .whole-1 .opt ul .optall table {
-  width: 100%;
-  background-color: #f3f3f3;
-  border: 1px solid #e0e0e0;
-  margin-bottom: 20px;
-}
-
-section .whole .whole-1 .opt ul .optall #checkall {
-  margin-left: 10px;
-}
-
-section .whole .whole-1 .opt ul .optall th {
-  height: 50px;
-}
-
-section .whole .whole-1 .opt ul .optall th span {
-  margin-left: 85px;
-}
-
-section .whole .whole-1 .opt #checklist .among {
-  margin-bottom: 20px;
-}
-
-section .whole .whole-1 .opt #checklist .among table {
-  width: 100%;
-  background-color: #fff;
-  border: 1px solid #e0e0e0;
-}
-
-section .whole .whole-1 .opt #checklist .among .box1 {
-  margin-left: 15px;
-}
-
-section .whole .whole-1 .opt #checklist .among th {
-  height: 115px;
-}
-
-section .whole .whole-1 .opt #checklist .among th:nth-child(1) {
-  width: 135px;
-}
-
-section .whole .whole-1 .opt #checklist .among th:nth-child(1) img {
-  padding: 10px;
-  width: 82px;
-}
-
-section .whole .whole-1 .opt #checklist .among th:nth-child(2) {
-  width: 500px;
-}
-
-section .whole .whole-1 .opt #checklist .among th:nth-child(3), section .whole .whole-1 .opt #checklist .among th:nth-child(4), section .whole .whole-1 .opt #checklist .among th:nth-child(6) {
-  width: 120px;
-}
-
-section .whole .whole-1 .opt #checklist .among th:nth-child(4) input {
-  width: 90px;
-}
-section .whole .whole-1 .opt #checklist .among th:nth-child(5) {
-  width: 120px;
-}
-section .whole .whole-1 .opt #checklist .among th:nth-child(5) input{
-  text-align: center;
-}
-
-
-section .whole .whole-1 .opt #checklist .among th:nth-child(5) input:nth-child(1), section .whole .whole-1 .opt #checklist .among th:nth-child(5) input:nth-child(3) {
-  width: 15px;
-}
-
-section .whole .whole-1 .opt #checklist .among th:nth-child(5) input:nth-child(2) {
-  width: 30px;
-}
-
-section .whole .whole-1 .opt #checklist .among span {
-  width: 400px;
-  font-size: 12px;
-  display: inline-block;
-}

css/logshoppingcar/shopcar2.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 * {
   margin: 0;
   padding: 0;
@@ -12,100 +13,167 @@ a {
 }
 
 section {
+  height: 1200px;
   background-color: #f5f5f5;
 }
 
-section .content {
+section .whoil {
   padding: 15px 50px;
-  margin: auto;
 }
 
-section .content .all {
+section .whoil .whoil-1 {
-  display: inline-block;
+  margin: 20px auto;
+  padding: 25px;
+  /* 最外层盒子 */
+  /* 图片 */
+  /* 左右按钮 */
+  /* 改变左右箭头、分页器的样式 */
+  /* 单独修改分页器的css样式，swiper默认是10*10的span */
+  /* 移动鼠标，隐藏显示左右按钮，配合js使用 */
 }
 
-section .content .all h2 {
+section .whoil .whoil-1 .all {
+  padding-bottom: 10px;
+  float: left;
+  display: contents;
+}
+
+section .whoil .whoil-1 .all h2 {
   font-weight: 600;
   color: #cb1919;
-  float: left;
+  padding: 20px;
-  padding-bottom: 10px;
+  background-color: #fff;
+  border-bottom: #cb1919 2px solid;
 }
 
-section .content .cartList {
+section .whoil .whoil-1 table {
-  border-top: 2px solid #cb1919;
+  width: 100%;
+  border: 1;
+  border-collapse: separate;
+  border-spacing: 0px 20px;
+  background-color: #fff;
 }
 
-section .content .cartList .whoil {
+section .whoil .whoil-1 table thead {
   width: 100%;
   background-color: #f3f3f3;
-  border: 1px solid #e0e0e0;
+  border: 2px solid #000;
   margin-bottom: 20px;
-  display: inline-flex;
 }
 
-section .content .cartList .whoil li {
+section .whoil .whoil-1 table thead th {
-  padding: 20px 46px;
+  padding: 10px 20px;
 }
 
-section .content .cartList .whoil li:nth-child(1) {
+section .whoil .whoil-1 table thead th:nth-child(2) {
-  padding: 20px 10px;
+  float: left;
 }
 
-section .content .cartList .whoil li:nth-child(1) img {
+section .whoil .whoil-1 table thead th input {
+  float: left;
+}
+
+section .whoil .whoil-1 table tbody .inline {
+  border: 1px solid #e0e0e0;
+}
+
+section .whoil .whoil-1 table tbody .inline td span {
+  display: inline-block;
   margin-left: 10px;
 }
 
-section .content .cartList .whoil li:nth-child(3) {
+section .whoil .whoil-1 table tbody .inline td:nth-child(1) {
-  width: 800px;
+  width: 70px;
+  padding: 0px 10px;
 }
 
-section .content .cartList .whoil li:nth-child(4), section .content .cartList .whoil li:nth-child(5), section .content .cartList .whoil li:nth-child(6), section .content .cartList .whoil li:nth-child(7) {
+section .whoil .whoil-1 table tbody .inline td:nth-child(n + 2) {
-  float: right;
+  padding: 10px 20px;
 }
 
-section .content .cartList ul {
+section .whoil .whoil-1 table tbody .inline td:nth-child(n + 3) {
-  width: 100%;
+  text-align: center;
+}
+
+section .whoil .whoil-1 table tbody .inline td:nth-child(4) span {
+  width: 20px;
+  margin: 0;
+}
+
+section .whoil .whoil-1 table tbody .inline td:nth-child(4) input {
+  width: 40px;
+  text-align: center;
+}
+
+section .whoil .whoil-1 table tfoot {
   background-color: #f3f3f3;
-  border: 1px solid #e0e0e0;
-  display: inline-flex;
 }
 
-section .content .cartList ul li:nth-child(1) {
+section .whoil .whoil-1 table tfoot td:nth-child(1) {
-  padding: 20px 5px;
+  padding: 10px 20px;
 }
 
-section .content .cartList ul li:nth-child(1) img {
+section .whoil .whoil-1 table tfoot td:nth-child(5) {
-  margin-left: 20px;
+  width: 200px;
-  margin-top: -10px;
 }
 
-section .content .cartList ul li:nth-child(2) {
+section .whoil .whoil-1 table tfoot td:nth-child(5) #allPrice {
-  padding: 25px 15px;
+  color: #cb1919;
-  width: 400px;
+  font-size: 30px;
+  font-weight: 800;
 }
 
-section .content .cartList ul li:nth-child(3) {
+section .whoil .whoil-1 table tfoot td:nth-child(6) span {
-  width: 300px;
+  background-color: #cb1919;
+  padding: 15px 25px;
 }
 
-section .content .cartList ul li:nth-child(5) {
+section .whoil .whoil-1 .swiper-container {
-  padding: 20px 5px;
+  width: 100%;
+  height: 380px;
+  background-color: #fff;
 }
 
-section .content .cartList ul li:nth-child(5) input {
+section .whoil .whoil-1 .swiper-container .swiper-text {
-  border: 0;
+  padding: 10px 5px;
-  outline: none;
+  border-bottom: #e0e0e0 1px solid;
-  background-color: transparent;
 }
 
-section .content .cartList ul li:nth-child(4), section .content .cartList ul li:nth-child(5), section .content .cartList ul li:nth-child(6), section .content .cartList ul li:nth-child(7) {
+section .whoil .whoil-1 .swiper-wrapper {
+  margin-top: 20px;
+}
+
+section .whoil .whoil-1 .swiper-container img {
+  display: block;
+  height: 287px;
+  overflow: hidden;
+}
+
+section .whoil .whoil-1 .swiper-container .swiper-button-prev,
+section .whoil .whoil-1 .swiper-container .swiper-button-next {
+  height: 24px;
   margin: auto;
-  float: right;
 }
 
-section .content .cartList ol {
+section .whoil .whoil-1 .swiper-container {
-  display: inline-flex;
+  --swiper-theme-color: #ff6600;
-  width: 100%;
+}
-  background-color: #f3f3f3;
+
-  border: 1px solid #e0e0e0;
+section .whoil .whoil-1 .swiper-container .swiper-pagination {
+  bottom: 10px;
+}
+
+section .whoil .whoil-1 .swiper-container .swiper-pagination span {
+  width: 10px;
+  height: 10px;
+  --swiper-pagination-color: red;
+}
+
+section .whoil .whoil-1 .swiper-container .hide {
+  opacity: 0;
+}
+
+section .whoil .whoil-1 .swiper-button-next,
+section .whoil .whoil-1 .swiper-button-prev {
+  transition: opacity 0.5s;
 }

css/logshoppingcar/shopcar2.min.css

@@ -1 +0,0 @@
-*{margin:0;padding:0}li{list-style:none}a{text-decoration:none}section{background-color:#f5f5f5}section .content{padding:15px 50px;margin:auto}section .content .all{display:inline-block}section .content .all h2{font-weight:600;color:#cb1919;float:left;padding-bottom:10px}section .content .cartList{border-top:2px solid #cb1919}section .content .cartList .whoil{width:100%;background-color:#f3f3f3;border:1px solid #e0e0e0;margin-bottom:20px;display:inline-flex}section .content .cartList .whoil li{padding:20px 46px}section .content .cartList .whoil li:nth-child(1){padding:20px 10px}section .content .cartList .whoil li:nth-child(1) img{margin-left:10px}section .content .cartList .whoil li:nth-child(3){width:800px}section .content .cartList .whoil li:nth-child(4),section .content .cartList .whoil li:nth-child(5),section .content .cartList .whoil li:nth-child(6),section .content .cartList .whoil li:nth-child(7){float:right}section .content .cartList ul{width:100%;background-color:#f3f3f3;border:1px solid #e0e0e0;display:inline-flex}section .content .cartList ul li:nth-child(1){padding:20px 5px}section .content .cartList ul li:nth-child(1) img{margin-left:20px;margin-top:-10px}section .content .cartList ul li:nth-child(2){padding:25px 15px;width:400px}section .content .cartList ul li:nth-child(3){width:300px}section .content .cartList ul li:nth-child(5){padding:20px 5px}section .content .cartList ul li:nth-child(5) input{border:0;outline:none;background-color:transparent}section .content .cartList ul li:nth-child(4),section .content .cartList ul li:nth-child(5),section .content .cartList ul li:nth-child(6),section .content .cartList ul li:nth-child(7){margin:auto;float:right}section .content .cartList ol{display:inline-flex;width:100%;background-color:#f3f3f3;border:1px solid #e0e0e0}

css/logshoppingcar/shopcar2.scss

@@ -1,115 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-}
-li {
-    list-style: none;
-}
-a {
-    text-decoration: none;
-}
-
-section {
-    background-color: #f5f5f5;
-    .content {
-        padding: 15px 50px;
-        margin: auto;
-        .all {
-            display: inline-block;
-            h2 {
-                font-weight: 600;
-                color: #cb1919;
-                float: left;
-                padding-bottom: 10px;
-            }
-        }
-        .cartList {
-            border-top: 2px solid #cb1919;
-            .whoil {
-                width: 100%;
-                background-color: #f3f3f3;
-                border: 1px solid #e0e0e0;
-                margin-bottom: 20px;
-                display: inline-flex;
-                li {
-                    padding: 20px 46px;
-                    &:nth-child(1) {
-                        padding: 20px 10px;
-                        img {
-                            margin-left: 10px;
-                        }
-                    }
-                    &:nth-child(3) {
-                        width: 800px;
-                    }
-                    &:nth-child(4),
-                    &:nth-child(5),
-                    &:nth-child(6),
-                    &:nth-child(7) {
-                        float: right;
-                    }
-                }
-            }
-            // .checklist {
-            //     // padding: 20px 5px;
-            //     &:nth-child(1) {
-            //         padding: 20px 5px;
-            //     }
-            //     // &:nth-child(3) {
-            //     //     width: 800px;
-            //     // }
-            //     // &:nth-child(4),
-            //     // &:nth-child(5),
-            //     // &:nth-child(6),
-            //     // &:nth-child(7) {
-            //     //     width: 120px;
-            //     //     padding: 20px 46px;
-            //     // }
-            // }
-            ul {
-                width: 100%;
-                background-color: #f3f3f3;
-                border: 1px solid #e0e0e0;
-                display: inline-flex;
-                li {
-                    &:nth-child(1) {
-                        padding: 20px 5px;
-                        img {
-                            margin-left: 20px;
-                            margin-top: -10px;
-                        }
-                    }
-                    &:nth-child(2) {
-                        padding: 25px 15px;
-                        width: 400px;
-                    }
-                    &:nth-child(3) {
-                        width: 300px;
-                    }
-                    &:nth-child(5) {
-                        padding: 20px 5px;
-                        input {
-                            border: 0; // 去除未选中状态边框
-                            outline: none; // 去除选中状态边框
-                            background-color: rgba(0, 0, 0, 0); // 透明背景
-                        }
-                    }
-                    &:nth-child(4),
-                    &:nth-child(5),
-                    &:nth-child(6),
-                    &:nth-child(7) {
-                        margin: auto;
-                        float: right;
-                    }
-                }
-            }
-            ol {
-                display: inline-flex;
-                width: 100%;
-                background-color: #f3f3f3;
-                border: 1px solid #e0e0e0;
-                
-            }
-        }
-    }
-}

htmls/logshoppingcar/shopcar copy.html

@@ -1,174 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head lang="en">
-    <meta charset="UTF-8">
-    <title>购物车</title>
-    <link rel="stylesheet" href="../../css/layui.css">
-    <link rel="stylesheet" href="../../css/logshoppingcar/shopcar2.css">
-</head>
-
-<body>
-    <section>
-        <div class="content">
-            <!-- <div class="logo">
-            <img src=""><span onclick="close_plan();">关闭</span>
-        </div> -->
-            <div class="whole">
-
-                <div class="all">
-                    <h2>全部商品(20)</h2>
-                </div>
-            </div>
-            <div class="cartList" id="cartList">
-                <ul class="whoil">
-                    <li> <input type="checkbox" id="checkall">
-                        <label for="value1">全选</label>
-                    </li>
-                    <li>商品</li>
-                    <li></li>
-                    <li>单价</li>
-                    <li>数量</li>
-                    <li>小计</li>
-                    <li>操作</li>
-                </ul>
-                <ul>
-                    <li><input type="checkbox" name="arr[]" value="1">
-                        <label for="value1"></label>
-                        <img src="../../img/images/1-1.png"></li>
-                    <li>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</li>
-                    <li></li>
-                    <li>x3</li>
-                    <li>¥<input type="text" name="price" value="1688.00" disabled="true"></li>
-                    <li>
-                        <input type="button" name="minus" value="-" onclick="minus(0);" style="width: 15px;">
-                        <input type="text" name="amount" value="1" style="text-align: center;width: 40px;">
-                        <input type="button" name="plus" value="+" onclick="plus(0);" style="width: 15px;">
-                    </li>
-                    <li id="price0">¥1688.00</li>
-                    <li>
-                       
-                        <p onclick="del(0);">删除</p>
-                    </li>
-                </ul>
-                <ul>
-                    <li><input type="checkbox" name="arr[]" value="1">
-                        <label for="value1"></label>
-                        <img src="../../img/images/1-1.png"></li>
-                    <li>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</li>
-                    <li></li>
-                    <li>x3</li>
-                    <li>¥<input type="text" name="price" value="18.00" disabled="true"></li>
-                    <li>
-                        <input type="button" name="minus" value="-" onclick="minus(0);" style="width: 15px;">
-                        <input type="text" name="amount" value="1" style="text-align: center;width: 40px;">
-                        <input type="button" name="plus" value="+" onclick="plus(0);" style="width: 15px;">
-                    </li>
-                    <li id="price0">¥18.00</li>
-                    <li>
-                       
-                        <p onclick="del(0);">删除</p>
-                    </li>
-                </ul>
-
-                <ol>
-                    <!-- <li>
-                        <input type="checkbox" id="checkall">
-                        <label for="value1">全选/取消</label>
-                    </li> -->
-                    <li id="totalPrice">商品总计：<span></span></li>
-                    <li><span onclick="accounts();">结 算</span></li>
-                </ol>
-
-            </div>
-            <div style="display:none;"></div>
-        </div>
-    </section>
-    <script>
-        $(function () {
-            /*全选按钮状态显示判断*/
-            $("#checklist").find("input[type='checkbox']").click(function () {
-                /*初始化选择为TURE*/
-                $("#checkall")[0].checked = true;
-                /*获取未选中的*/
-                var nocheckedList = new Array();
-                $("#checklist").find('input:not(:checked)').each(function () {
-                    nocheckedList.push($(this).val());
-                });
-                /*状态显示*/
-                if (nocheckedList.length == $("#checklist").find('input').length) {
-                    $("#checkall")[0].checked = false;
-                    $("#checkall")[0].indeterminate = false;
-                } else if (nocheckedList.length) {
-                    $("#checkall")[0].indeterminate = true;
-                } else {
-                    $("#checkall")[0].indeterminate = false;
-                }
-            });
-            // 全选/取消
-            $("#checkall").click(function () {
-                // alert(this.checked);
-                if ($(this).is(':checked')) {
-                    $("#checklist").find('input').each(function () {
-                        $(this).prop("checked", true);
-                    });
-                } else {
-                    $("#checklist").find('input').each(function () {
-                        $(this).removeAttr("checked", false);
-                        $(this).prop("checked", false); // 根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
-                    });
-                }
-            });
-        });
-        //减
-        function minus(num) {
-            var prices = document.getElementsByName("price")[num].value;
-            var count = parseInt(document.getElementsByName("amount")[num].value) - 1;
-            if (count < 1) {
-                alert("不能再减了，再减就没有啦！");
-            }
-            else {
-                document.getElementsByName("amount")[num].value = count;
-                var totals = parseFloat(prices * count);
-                document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);//.toFixed(2)表示四舍五入，取2位小数点
-                total();
-            }
-        }
-        //增
-        function plus(num) {
-            var prices = document.getElementsByName("price")[num].value;
-            var count = parseInt(document.getElementsByName("amount")[num].value) + 1;
-            document.getElementsByName("amount")[num].value = count;
-            var totals = parseFloat(prices * count);
-            document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);
-            total();
-        }
-        //计算总额
-        function total() {
-            var prices = document.getElementsByName("price");
-            var count = document.getElementsByName("amount");
-            var sum = 0;
-            for (var i = 0; i < prices.length; i++) {
-                sum += prices[i].value * count[i].value;
-            }
-            document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML = "¥" + sum.toFixed(2);
-        }
-        //结算
-        function accounts() {
-            var obj = document.getElementById("cartList").nextElementSibling;//.nextElementSibling表示下一个同辈元素
-            obj.style.display = "block";
-            var str = "您本次购买的商品信息好下：";
-            str += "<br/>白岩松：白说：" + document.getElementById("price0").innerHTML;
-            str += "<br/>岛上书店：" + document.getElementById("price1").innerHTML;
-            str += "<br/>商品总计：" + document.getElementById("totalPrice").innerHTML;
-            obj.innerHTML = str;
-        }
-        //删除
-        function del(num) {
-            var ocartList = document.getElementById("cartList");
-            var delObj = document.getElementsByName("price")[num].parentNode.parentNode;
-            ocartList.removeChild(delObj);
-            total();
-        } 
-    </script>
-</body>

htmls/logshoppingcar/shopcar.html

@@ -1,176 +1,309 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 
-<head>
+<head lang="en">
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>购物车</title>
     <link rel="stylesheet" href="../../css/layui.css">
-    <link rel="stylesheet" href="../../css/logshoppingcar/shopcar.css">
+    <link rel="stylesheet" href="../../css/swiper-bundle.min.css">
+    <link rel="stylesheet" href="../../css/logshoppingcar/shopcar2.css">
+    <script src="../../js/swiper-bundle.min.js"></script>
 </head>
 
 <body>
-
     <section>
-        <div class="whole">
+        <div class="whoil">
-            <div class="whole-1">
+            <div class="whoil-1">
+                <th>
                     <div class="all">
                         <h2>全部商品(20)</h2>
                     </div>
-                <!-- 选择 -->
-                <div class="opt cartList" id="cartList">
-                    <ul>
-                        <li class="optall">
-                            <table>
-                                <th>
-                                    <input type="checkbox" id="checkall">
-                                    <label for="value1">全选</label>
-                                    <span>商品</span>
                 </th>
+
+                <!-- 选择 -->
+                <table>
+                    <thead>
+                        <tr>
+                            <th><input type="checkbox" id="ckAll" onclick="checkAll()">全选</th>
+                            <th>商品</th>
                             <th>单价</th>
                             <th>数量</th>
                             <th>小计</th>
                             <th>操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="inline">
+                            <td><input type="checkbox" name="ck" onclick="check()"></td>
+                            <td><img src="../../img/images/1-1.png" alt=""><span>竹迪
+                                    客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
+                                    11时来运转8190</span>
+                                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
+                            </td>
+                            <td>188.00</td>
+                            <td>
+                                <span class="reduce" onclick="reduceCount(this)">-</span>
+                                <input type="text" value="1" class="count-input">
+                                <span class="add" onclick="addCount(this)">+</span>
+                            </td>
+                            <td>188.00</td>
+                            <td>
+                                <span class="delete" onclick="del(this)">删除</span>
+                            </td>
+                        </tr>
+                        <tr class="inline">
+                            <td><input type="checkbox" name="ck" onclick="check()"></td>
+                            <td><img src="../../img/images/1-2.png" alt=""><span>竹迪
+                                    客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
+                                    11时来运转8190</span>
+                                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
+                            </td>
+                            <td>188.00</td>
+                            <td>
+                                <span class="reduce" onclick="reduceCount(this)">-</span>
+                                <input type="text" value="1" class="count-input">
+                                <span class="add" onclick="addCount(this)">+</span>
+                            </td>
+                            <td>188.00</td>
+                            <td>
+                                <span class="delete" onclick="del(this)">删除</span>
+                            </td>
+                        </tr>
+                        <tr class="inline">
+                            <td><input type="checkbox" name="ck" onclick="check()"></td>
+                            <td><img src="../../img/images/1-3.png" alt=""><span>竹迪
+                                    客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
+                                    11时来运转8190</span>
+                                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
+                            </td>
+                            <td>188.00</td>
+                            <td>
+                                <span class="reduce" onclick="reduceCount(this)">-</span>
+                                <input type="text" value="1" class="count-input">
+                                <span class="add" onclick="addCount(this)">+</span>
+                            </td>
+                            <td>188.00</td>
+                            <td>
+                                <span class="delete" onclick="del(this)">删除</span>
+                            </td>
+                        </tr>
+                        <tr class="inline">
+                            <td><input type="checkbox" name="ck" onclick="check()"></td>
+                            <td><img src="../../img/images/1-4.png" alt=""><span>竹迪
+                                    客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画
+                                    11时来运转8190</span>
+                                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x3</span>
+                            </td>
+                            <td>188.00</td>
+                            <td>
+                                <span class="reduce" onclick="reduceCount(this)">-</span>
+                                <input type="text" value="1" class="count-input">
+                                <span class="add" onclick="addCount(this)">+</span>
+                            </td>
+                            <td>188.00</td>
+                            <td>
+                                <span class="delete" onclick="del(this)">删除</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tfoot id="foot">
+                        <tr>
+                            <td><input type="checkbox" id="ckAll" onclick="checkAll()">&nbsp;&nbsp;全选</td>
+                            <td><span class="delete" onclick="del(this)">删除</span></td>
+                            <td></td>
+                            <td>总数：<span id="allCount"></span>件</td>
+                            <td>总价：￥<span id="allPrice"></span></td>
+                            <td><span id="accounts" onclick="accounts();">结算</span></td>
+
+                        </tr>
+                    </tfoot>
                 </table>
-                        </li>
-                        <li></li>
-                        <ul id="checklist">
-                            <li class="among">
-                                <table>
-                                    <th> <li><input type="checkbox" name="arr[]" value="1" class="box1">
-                                        <label for="value1"><img src="../../img/images/1-1.png" alt=""></label></li>
-                                    </th>
-                                    <th><li>
-                                            竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
-                                        </li></th>
-                                    <th>
-                            <li>x3</li>
-                            </th>
-                            <th>
-                                <li>￥<input type="text" name="price" value="1688.00" disabled="true"></li>
-                            </th>
-                            <th>
-                                <li>
-                                    <input type="button" name="minus" value="-" onclick="minus(0);">
-                                    <input type="text" name="amount" value="1">
-                                    <input type="button" name="add" value="+" onclick="add(0);">
-                                </li>
-                            </th>
-                            <th>
-                                <li id="price0">￥564.6</li>
-                            </th>
-                            <th>
-                                <li>
-                                    <p onclick="del(0);">删除</p>
-                                </li>
-                            </th>
-                            </table>
-                            </li>
 
-
+                <div class="swiper-container">
-                        </ul>
+                    <div class="swiper-text">
-                        </li>
+                        推荐商品
-                    </ul>
                     </div>
-                <div style="display:none;"></div>
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide"><img src="../../img/images/1.png" alt=""></div>
+                        <div class="swiper-slide"><img src="../../img/images/2.png" alt=""></div>
+                        <div class="swiper-slide"><img src="../../img/images/3.png" alt=""></div>
+                        <div class="swiper-slide"><img src="../../img/images/4.png" alt=""></div>
+                        <div class="swiper-slide"><img src="../../img/images/1.png" alt=""></div>
+                    </div>
+                    <!-- 如果需要分页器 -->
+                    <div class="swiper-pagination"></div>
+                    <!-- 如果需要导航按钮 -->
+                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-button-next"></div>
                 </div>
             </div>
-
     </section>
 
-</body>
+    <script>
-<script type="text/javascript" src="../../js/jquery-1.9.1.js"></script>
+        var mySwiper = new Swiper('.swiper-container', {
-<script type="text/javascript">
+            loop: true, // 循环模式
+            slidesPerView: 5,//显示数量
+            spaceBetween: 25,//图片间距
+            autoplay: {
+                delay: 3000,
+                stopOnLastSlide: true,
+                disableOnInteraction: true,//是否禁止自动切换
+            },
+            // 分页器
+            pagination: {
+                el: '.swiper-pagination',
+                clickable: true,//点击跳转
+            },
+            navigation: {
+                nextEl: '.swiper-button-next',//左按钮
+                prevEl: '.swiper-button-prev',//右按钮
+            },
+            //鼠标移入变手
+            grabCursor: true,
+        })
+        // 鼠标移入轮播图范围，执行的函数
+        mySwiper.el.onmouseover = function () {
+            mySwiper.autoplay.stop();
+            mySwiper.navigation.$nextEl.removeClass('hide');
+            mySwiper.navigation.$prevEl.removeClass('hide');
+        }
+        // 鼠标移出轮播图范围，执行的函数
+        mySwiper.el.onmouseout = function () {
+            mySwiper.autoplay.start();
+            mySwiper.navigation.$nextEl.addClass('hide');
+            mySwiper.navigation.$prevEl.addClass('hide');
+        }
 
-//计算总额
+        //获取元素
-function total() {
+        var ckAll = document.getElementById('ckAll');
-        var prices = document.getElementsByName("price");
+        var cks = document.getElementsByName('ck');
-        var count = document.getElementsByName("amount");
+        var trs = document.getElementsByClassName('inline');
+        var allCount = document.getElementById('allCount');
+        var allPrice = document.getElementById('allPrice');
+        var countInput = document.getElementsByClassName('count-input');
+        var accounts = document.getElementById("accounts");
+        // 结算
+        // function accounts(){
+        //     var sum=0;
+        // }
+        // function accounts() {
+
+        //     accounts.style.display = "block";
+        //     alert("")
+        //     accounts.innerHTML = str;
+        // }
+
+        //计算总数
+        function sumCount() {
             var sum = 0;
-        for (var i = 0; i < prices.length; i++) {
+            for (var i = 0; i < cks.length; i++) {
-            sum += prices[i].value * count[i].value;
+                if (cks[i].checked == true) {
-        }
+                    var num = Number(countInput[i].value);
-        document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML = "¥" + sum.toFixed(2);
+                    sum += num;
-    }
-    //结算
-    function accounts() {
-        var obj = document.getElementById("cartList").nextElementSibling;//.nextElementSibling表示下一个同辈元素
-        obj.style.display = "block";
-        // var str = "您本次购买的商品信息好下：";
-        // str += "<br/>白岩松：白说：" + document.getElementById("price0").innerHTML;
-        // str += "<br/>岛上书店：" + document.getElementById("price1").innerHTML;
-        // str += "<br/>商品总计：" + document.getElementById("totalPrice").innerHTML;
-        // obj.innerHTML = str;
-    }
-    //删除
-    function del(num) {
-        var ocartList = document.getElementById("cartList");
-        var delObj = document.getElementsByName("price")[num].parentNode.parentNode;
-        ocartList.removeChild(delObj);
-        total();
-    } 
-    //增
-    function add(num) {
-        var prices = document.getElementsByName("price")[num].value;
-        var count = parseInt(document.getElementsByName("amount")[num].value) + 1;
-        document.getElementsByName("amount")[num].value = count;
-        var totals = parseFloat(prices * count);
-        document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);
-        total();
-    }
-    //减
-    function minus(num) {
-        var prices = document.getElementsByName("price")[num].value;
-        var count = parseInt(document.getElementsByName("amount")[num].value) - 1;
-        if (count < 1) {
-            alert("不能再减了，再减就没有啦！");
-        }
-        else {
-            document.getElementsByName("amount")[num].value = count;
-            var totals = parseFloat(prices * count);
-            document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);//.toFixed(2)表示四舍五入，取2位小数点
-            total();
                 }
             }
-    // $(function () {
+            allCount.innerHTML = sum;
-    //     /*全选按钮状态显示判断*/
+        }
-    //     $("#checklist").find("input[type='checkbox']").click(function () {
+
-    //         /*初始化选择为TURE*/
+        //计算总价
-    //         $(".checkall")[0].checked = true;
+        function sumPrice() {
-    //         /*获取未选中的*/
+            var sum = 0;
-    //         var nocheckedList = new Array();
+            for (var i = 0; i < cks.length; i++) {
-    //         $("#checklist").find('input:not(:checked)').each(function () {
+                if (cks[i].checked == true) {
-    //             nocheckedList.push($(this).val());
+                    var p = Number(trs[i].children[4].innerHTML);
-    //         });
+                    sum += p;
-    //         /*状态显示*/
+                }
-    //         if (nocheckedList.length == $("#checklist").find('input').length) {
+            }
-    //             $(".checkall")[0].checked = false;
+            allPrice.innerHTML = sum.toFixed(2);
-    //             $(".checkall")[0].indeterminate = false;
+        }
-    //         } else if (nocheckedList.length) {
+
-    //             $(".checkall")[0].indeterminate = true;
+        //计算每一行的总价
-    //         } else {
+        function inlinePrice() {
-    //             $(".checkall")[0].indeterminate = false;
+            for (var i = 0; i < trs.length; i++) {
+                //获取每一行单价
+                var price = Number(trs[i].children[2].innerHTML);
+                //获取数量
+                var num = Number(trs[i].children[3].children[1].value);
+                //小计
+                trs[i].children[4].innerHTML = (price * num).toFixed(2);
+
+            }
+        }
+
+        // // 输入数量的最大值
+        // functionb (num){
+        // if(value.length<8){
+        //     var btn1 = document.getElementById("org");
+        //     btn1.insertBefore(input1, null);
+        // }else{
+        //     alert("不能再添加");
         // }
-    //     });
-    //     // 全选/取消
-    //     $(".checkall").click(function () {
-    //         // alert(this.checked);
-    //         if ($(this).is(':checked')) {
-    //             $("#checklist").find('input').each(function () {
-    //                 $(this).prop("checked", true);
-    //             });
-    //         } else {
-    //             $("#checklist").find('input').each(function () {
-    //                 $(this).removeAttr("checked", false);
-    //                 $(this).prop("checked", false); // 根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
-    //             });
         // }
-    //     });
-    // });
 
+        //数量增加
+        function addCount(e) {
+            // 获取input标签里的value值,数量
+            var num = parseInt(e.previousElementSibling.value);
+            // 最大数量
+            if (num > 98) {
+                alert("不能再多了");
+                return;
+            }
+            //数量加1
+            e.previousElementSibling.value = num + 1;
+            inlinePrice();
+            sumPrice();
+            sumCount();
 
+        }
 
+        //数量递减
+        function reduceCount(e) {
+            var num = parseInt(e.nextElementSibling.value);
+            if (num <= 0) {
+                alert("不能再减了");
+                return;
+            }
 
-</script>
+            e.nextElementSibling.value = num - 1;
+            inlinePrice();
+            sumPrice();
+            sumCount();
+        }
 
-</html>
+        //全选和反选
+        function checkAll() {
+            for (var i = 0; i < cks.length; i++) {
+                cks[i].checked = ckAll.checked;
+            }
+            sumPrice();
+            sumCount();
+        }
+
+        //复选框的交互
+        function check() {
+            // 判断四个小的复选框有没有没被选中的,如果有一个,就把ckAllde的checked 变为false
+            for (var i = 0; i < cks.length; i++) {
+                if (cks[i].checked == false) {
+                    ckAll.checked = false;
+                    sumPrice();
+                    sumCount();
+                    // 有一个小复选框为false,就不需要对其他复选框进行判断了,直接中止函数下面的执行语句
+                    return;
+                }
+            }
+            //循环结束后,如果小复选框checked的值都为true,ckAll的checked的值就为true
+            ckAll.checked = true;
+            sumPrice();
+            sumCount();
+        }
+
+        //单行删除
+        function del(e) {
+            e.parentElement.parentElement.remove();
+            sumPrice();
+            sumCount();
+        }
+
+    </script>
+</body>