洛可可工作室第四次考核 (答卷)
好家伙，年过完了，要开始干活了
1.轮播图
目录结构:
img放图片,
good.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图</title> <!-- css样式 --> <style type="text/css"> /*清除边距*/ div,ul,li{ margin: 0; padding: 0; } .button{ position: absolute; top: 100px; left: 500px; } .button1{ position: absolute; top: 130px; left: 500px; } /*首先准备一个放图片的容器*/ .container{ width: 500px; height: 280px; position: relative; top: 100px; left: 30%; /*border: 1px solid #ccc;*/ } /*图片样式*/ .container img{ position: absolute; /*把所有图片放在同一个位置*/ width: 100%; transition-duration: 1s; /*设置过渡时间*/ opacity: 0; /*把所有图片变透明*/ } /*图片显示开关*/ .container img.on{ opacity: 1; /*用于显示图片*/ } /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/ .left, .right{ position: absolute; top: 30%; width: 60px; height: 100px; line-height: 100px; background-color: #666; opacity: 0.5; text-align: center; font-size: 60px; color: #ccc; display: none; /*先隐藏按钮*/ cursor: pointer; /*设置鼠标悬停时的样式*/ } .left{ left: 0; } .right{ right: 0; } .container:hover .left, .container:hover .right{ display: block; /*鼠标悬停才容器范围内时显示按钮*/ } .left:hover, .right:hover{ color: #fff; } /*焦点*/ .container ul{ position: absolute; bottom: 0; max-width: 500px; padding: 10px 200px; } .container ul li{ list-style: none; float: left; width: 10px; height: 10px; border-radius: 50%; margin-left: 10px; background-color: #ccc; cursor: pointer; } .container ul li.active{ background-color: #fff; /*焦点激活时的样式*/ } </style> </head> <body> <input id="button" type="button" value="单向循环" οnclick="buttonClick();" class="button"> <input id="button" type="button" value="单向非循环" οnclick="buttonClick();" class="button1"> <div class="container"> <!-- 图片 --> <!-- 先把第一张图片显示出来 --> <img class="on" src="img/1.jpeg" /> <img src="img/2.jpeg" /> <img src="img/3.jpeg" /> <img src="img/4.jpeg" /> <!-- 左右按钮 --> <div class="left"><</div> <div class="right">></div> <!-- 焦点 --> <ul> <li class="active"></li> <li></li> <li></li> <li></li> </ul> </div> <!-- js部分 --> <script type="text/javascript"> //1、找到container下的所有img标签,li标签,左右按钮 var aImgs = document.querySelectorAll('.container img'); var aLis = document.querySelectorAll('.container li'); var btnLeft = document.querySelector('.container .left'); var btnRight = document.querySelector('.container .right'); // //检验是否找到 // console.log(aImgs); // console.log(aLis); // console.log(btnLeft); // console.log(btnRight); //点击事件 //点击按钮图片切换 var index = 0; //当前图片下标 var lastIndex = 0; btnRight.onclick = function(){ //记录上一张图片的下标 lastIndex = index; //清除上一张图片的样式 aImgs[lastIndex].className = ''; aLis[lastIndex].className = ''; index++; index %= aImgs.length; //实现周期性变化 //设置当前图片的样式 aImgs[index].className = 'on'; aLis[index].className = 'active'; } //左边按钮类似 btnLeft.onclick = function(){ //记录上一张图片的下标 lastIndex = index; //清除上一张图片的样式 aImgs[lastIndex].className = ''; aLis[lastIndex].className = ''; index--; if (index < 0) { index = aImgs.length - 1; } //设置当前图片的样式 aImgs[index].className = 'on'; aLis[index].className = 'active'; } </script> </body> </html>
效果图:
单向非循环没有弄出来
2.简易淘宝购物车
目录结构:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结算清单</title>
<link rel="stylesheet" href="tabao.css"/>
<script src="taobao.js"></script>
</head>
<body>
<table id="cartTable">
<thead>
<tr>
<th><label><input id="selectAll" class="check-all check" type="checkbox"/> 全选</label></th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td>
<td class="goods"><img src="images/1.jpg" alt="" /><span>服装一</span></td>
<td class="price">5999</td>
<td class="count">
<span class="reduce">-</span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span></td>
<td class="subtotal">5999</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td>
<td class="goods"><img src="images/2.jpg" alt="" /><span>服装二</span></td>
<td class="price">1899</td>
<td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td>
<td class="subtotal">1899</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td>
<td class="goods"><img src="images/3.jpg" alt="" /><span>服装三</span></td>
<td class="price">1499</td>
<td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td>
<td class="subtotal">1499</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
</tbody>
</table>
<div class="foot" id="foot">
<div class="fr closing" onclick="showTotal()">结 算</div>
<div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
<div class="fr selected">已选商品
<span id="selectedTotal">0</span>件
</div>
</div>
</body>
</html>
效果图:
(看着还行)
删除商品,算价钱,增加数量都有了
还有价格排序没有弄出来
还得对着官方版本改改
That's all
