寫在前面：
由於w小小的失誤，這篇其實應該是(十二)，害，這件事情說來話長，儘管想改一下名字，但時間的先後沒辦法呀，只好將錯就錯了。
w：開始表演。
y：視而不見。
w：······
實現shoppingIndex.html中的圖片輪播效果：
只能這樣預覽一下圖片：
關鍵的picSlide.js:
// Created by guoqy
// 圖片輪播效果
//用於標識當前輪播到第幾幅圖片
var sign = 2;
//顯示輪播圖片
function showPic(index) {
//輪播效果，中當前顯示的圖片
var focusImg = document.getElementById("focusImg");
//圖片路徑
var imgSrc = "images/index/pic";
imgSrc =imgSrc+ index + ".jpg";
//更換輪播圖片
focusImg.src = imgSrc;
//獲取圓點列表
var lis = document.getElementsByClassName("focusBox")[0].getElementsByTagName("li");
//移除所有輪播按鈕的css樣式
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
//設置輪播圖片對應的輪播按鈕樣式
lis[index - 1].className = "cur";
}
//對輪播圖片進行計算處理
function setCurrentPic() {
showPic(sign);
sign++;
if (sign == 4) {
sign = 1;
}
}
//窗體加載時，指定顯示的圖片
window.onload = function () {
showPic(1);
}
//設置定時器
window.setInterval("setCurrentPic()",1000);
老生常談的style.css
@charset "utf-8";
/* CSS Document */
body{
font-size:12px;
font-family:microsoft yahei;
margin:0;
color:#000
}
a{
color:#000;
text-decoration:none
}
a:hover{
color:#ce2626;
text-decoration:none
}
img{
border:none
}
.font14{
font-size:14px;
font-weight:700
}
.font16{
font-size:16px;
font-weight:700
}
.padding-top{
padding-top:8px
}
/*頭部*/
.top_line{
border-bottom:1px solid #ccc;
font-size:12px;
font-family:"宋體";
line-height:30px
}
.nav_font16{
font-size:16px;
font-weight:700;
color:#fff
}
.orange{
font-weight:700;
color:#f60
}
.nav_active{
background:#b12121;
padding:5px 0;
height:30px
}
a.white{
color:#fff;
text-decoration:none
}
a.white:hover{
color:#ff0;
text-decoration:none
}
.shopcart{
background:url(../images/shoppingcart.png) no-repeat center;
width:16px;
height:16px;
display:inline-block}
/*左側導航*/
.table1 tr th{
height:33px;
background:#e5e4e1;
font-size:15px;
text-indent:10px;
text-align:left
}
.table1 tr td{
height:33px;
background:#fafafa;
font-size:14px;
text-indent:10px;
text-align:left
}
.red_dot{
font-size:25px;
margin-right:10px;
background:url(../images/red_dot.gif) no-repeat;
width:8px;
height:8px;
display:inline-block
}
/*右側公告*/
.notice_title{
font-size:16px;
text-indent:20px;
text-align:left
}
.gray_dot{
color:#ccc;
font-size:25px;
margin-right:10px;
background:url(../images/gray_dot.gif) no-repeat;
width:8px;
height:8px;
display:inline-block
}
.notice_text{
display:block;
width:230px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
text-align:left
}
/*foot*/
.foot_bg{
line-height:20px;
padding-top:10px;
font-size:12px
}
.padding-bottom{
padding-bottom:10px
}
.foot_line{
border-bottom:1px solid #ccc;
font-size:12px;
margin-top:10px
}
shoppingIndex.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漫步時尚廣場-購物欄目</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.focusBox {
position: absolute;
top: 490px;
width: 120px;
left: 50%;
margin-left: -60px;
list-style: none;
}
.focusBox li {
float: left;
margin-right: 10px;
width: 15px;
height: 15px;
border-radius: 10px;
background: gray;
cursor: pointer;
}
.focusBox li.cur {
background: #f60;
opacity: 0.6;
filter: alpha(opacity=60);
}
</style>
<script type="text/javascript" src="js/pictureSlide.js" ></script>
</head>
<body>
<!--頂部區域 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="top_line">
<tr>
<td bgcolor="#f7f7f7" ><table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="padding-top"><img src="images/star.jpg">收藏 | HI，歡迎來訂購 ！<a href="../manageadmin/login.html" class="orange">[請登錄]</a> <a href="../register/register.html" class="orange"> [免費註冊]</a></td>
<td align="right" > 客戶服務<img src="images/arrow.gif"> 網站導航<img src="images/arrow.gif"> <span class="droparrow"><span class="shopcart"></span>我的購物車<span class="orange">0</span>件<img src="images/arrow.gif" /></span></td>
</tr>
</table></td>
</tr>
</table>
<!--頂部區域 end-->
<!--logo和banner start-->
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="95"><a href="../index.html"><img src="images/logo.jpg"></a></td>
<td align="right"><img src="images/banner.jpg"></td>
</tr>
</table>
<!--logo和banner end-->
<!--菜單導航 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ce2626" >
<tr>
<td><table width="1200" border="0" cellspacing="0" cellpadding="4" align="center" class="nav_font16">
<tr>
<td width="200"> </td>
<td width="80" align="center" class="nav_active"><a href="shoppingIndex.html" class="white">首頁</a></td>
<td width="100" align="center"><a href="shoppingShow.html" class="white">最新上架</a></td>
<td width="100" align="center">品牌活動</td>
<td width="100" align="center">原廠直供</td>
<td width="80" align="center">團購</td>
<td width="100" align="center">限時搶購</td>
<td width="100" align="center">促銷打折</td>
<td width="200" align="center"> </td>
</tr>
</table></td>
</tr>
</table>
<!--菜單導航 end-->
<!--中間部分 start-->
<table width="1200" border="0" align="center" cellpadding="0" cellspacing="0" class="padding-top">
<tr>
<td width="220" valign="top" ><!--購物分類 start-->
<table width="100%" border="0" cellspacing="1" cellpadding="0" class="table1" bgcolor="#e5e4e1">
<tr>
<th >女裝</th>
</tr>
<tr>
<td ><span class="red_dot"></span><a href="#" >上衣</a><img src="images/arrow_r.jpg" align="right" ></td>
</tr>
<tr>
<td ><span class="red_dot"></span>下裝<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>連衣裙<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>內衣<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<th>男裝</th>
</tr>
<tr>
<td ><span class="red_dot"></span>T恤<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>短褲<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>襯衫<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<th>童裝</th>
</tr>
<tr>
<td ><span class="red_dot"></span>上衣<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>褲子<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<th>運動</th>
</tr>
<tr>
<td ><span class="red_dot"></span>運動褲<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>跑步鞋<img src="images/arrow_r.jpg" align="right"></td>
</tr>
</table>
<!--購物分類end--></td>
<td width="716" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<!--焦點圖 start-->
<img src="images/index/pic1.jpg" width="690" height="350" id="focusImg">
<ul class="focusBox">
<li onclick="showPic(1);"></li>
<li onclick="showPic(2);"></li>
<li onclick="showPic(3);"></li>
</ul>
<!--焦點圖 end-->
</td>
<td valign="top">
<!--右側start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><!--公告 start-->
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#eeeeee">
<tr>
<td height="35" bgcolor="#f7f7f7" class="notice_title">公告</td>
</tr>
<tr>
<td bgcolor="#ffffff"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="padding-top">
<tr>
<td height="30" class="notice_text"><a href="#"><span class="gray_dot"></span>李主任點贊網店第一村</a></td>
</tr>
<tr>
<td height="30" class="notice_text"><span class="gray_dot"></span>網購維權有望一站解決</td>
</tr>
<tr>
<td height="30" class="notice_text"><span class="gray_dot"></span>25國30萬商品全球直供</td>
</tr>
<tr>
<td height="30" class=" notice_text"><span class="gray_dot"></span>青島交警淘寶體獲公安部肯定</td>
</tr>
<tr>
<td height="30" class=" notice_text"><span class="gray_dot"></span>面對新常態 惟改革創新</td>
</tr>
<tr>
<td height="30" class=" notice_text"><span class="gray_dot"></span>差評敲詐淘寶 “差評師”獲刑8個月</td>
</tr>
</table></td>
</tr>
</table>
<!--公告 end--></td>
</tr>
<tr>
<td height="8"></td>
</tr>
<tr>
<td><!--品牌推薦區 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f7f7f7">
<tr>
<td align="center"><img src="images/index/link1.gif" width="80" height="35"></td>
<td align="center"><img src="images/index/link2.gif" width="80" height="35"></td>
<td align="center"><img src="images/index/link3.gif" width="80" height="35"></td>
</tr>
<tr>
<td align="center"><img src="images/index/link4.gif" width="80" height="35"></td>
<td align="center"><img src="images/index/link7.jpg" width="90" height="45" /></td>
<td align="center"><img src="images/index/link6.jpg" width="90" height="45"></td>
</tr>
<tr>
<td align="center"><img src="images/index/link5.jpg" width="90" height="45" /></td>
<td align="center"><img src="images/index/link8.jpg" width="90" height="45"></td>
<td align="center"><img src="images/index/link9.jpg" width="90" height="45"></td>
</tr>
</table>
<!--品牌推薦區 end--></td>
</tr>
</table>
<!-- 右側end--></td>
</tr>
</table></td>
</tr>
<!--產品分類區start-->
<tr>
<td><table width="99%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#dddddd">
<tr>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/index/pro1.jpg" width="65" height="65"></td>
<td class="font14">熱門品類<br/>
護膚彩妝啓示</td>
</tr>
<tr>
<td colspan="2">洗護套裝 面部精華 香水</td>
</tr>
<tr>
<td colspan="2">粉底液 面霜 潔面</td>
</tr>
<tr>
<td colspan="2">美容工具 複方精油 洗髮水 </td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/index/pro2.jpg" width="65" height="65"></td>
<td class="font14">強效保養<br/>
逆轉皮膚問題</td>
</tr>
<tr>
<td colspan="2">隔離 保溼 補水 清潔</td>
</tr>
<tr>
<td colspan="2">清爽 排毒 去角質</td>
</tr>
<tr>
<td colspan="2">美白 袪痘 收縮毛孔 緊質</td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/index/pro3.jpg" width="65" height="65"></td>
<td class="font14"> 人氣品牌<br/>
最IN大牌</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">薇姿
歐萊雅
美寶蓮 </td>
</tr>
<tr>
<td colspan="2">SK-II
百雀羚
雅頓 </td>
</tr>
<tr>
<td colspan="2">美即
謎尚
妮維雅 </td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/index/pro4.jpg" width="65" height="65"></td>
<td class="font14">潮流單品<br/>
當季最紅</td>
</tr>
<tr>
<td colspan="2">奶浴奶膏 補水凝膠 </td>
</tr>
<tr>
<td colspan="2">防裝生髮液 假髮片 香水</td>
</tr>
<tr>
<td colspan="2">艾米爾彩妝 豐胸美乳霜</td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/index/pro5.jpg" width="65" height="65"></td>
<td class="font14">美裝精選<br/>
超讚專題</td>
</tr>
<tr>
<td colspan="2">孕婦護膚 護季保養</td>
</tr>
<tr>
<td colspan="2">護膚嫩白集錦 快速約會妝</td>
</tr>
<tr>
<td colspan="2">美容時鐘模式 5步護膚術</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- 產品分類區end-->
</table></td>
</tr>
</table>
<!--中間部分 end-->
<!--底部 start--><Br/>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#6a6665" height="35" class="foot_bg">
<tr>
<td class="padding-top"><table width="1200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" align="center"><img src="images/gray1.jpg" ></td>
<td width="20%" align="center"><img src="images/gray2.jpg" ></td>
<td width="20%" align="center"><img src="images/gray3.jpg" ></td>
<td width="20%" align="center"><img src="images/gray4.jpg" ></td>
<td width="20%" align="center"><img src="images/gray5.jpg" ></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#efefef" class="foot_line padding-top"><table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img src="images/red1.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">新手指導</td>
</tr>
<tr>
<td>用戶註冊</td>
</tr>
<tr>
<td>電話下單</td>
</tr>
<tr>
<td>購物流程</td>
</tr>
<tr>
<td>購物保障</td>
</tr>
<tr>
<td>服務協議</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red2.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">支付方式</td>
</tr>
<tr>
<td>貨到付款</td>
</tr>
<tr>
<td>商城卡支付</td>
</tr>
<tr>
<td>支付寶、網銀支付</td>
</tr>
<tr>
<td>優惠券抵用</td>
</tr>
</table>
<td align="center" valign="top"><img src="images/red3.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">配送方式</td>
</tr>
<tr>
<td>閃電發貨</td>
</tr>
<tr>
<td>滿百包郵</td>
</tr>
<tr>
<td>配送範圍及時間</td>
</tr>
<tr>
<td>商品驗收及簽收</td>
</tr>
<tr>
<td>服務協議</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red4.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">售後服務</td>
</tr>
<tr>
<td>退換貨協議</td>
</tr>
<tr>
<td>關於發票</td>
</tr>
<tr>
<td>退換貨流程</td>
</tr>
<tr>
<td>退換貨運費</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red5.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">關於帳號</td>
</tr>
<tr>
<td>修改個人信息</td>
</tr>
<tr>
<td>修改密碼</td>
</tr>
<tr>
<td>找回密碼</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red6.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">優惠活動</td>
</tr>
<tr>
<td>競拍須知</td>
</tr>
<tr>
<td>搶購須知</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#efefef" align="center" class="padding-top">Copyright 2015-2020 Q- Walking Fashion E&S 漫步時尚廣場（QST教育）版權所有<Br/>
中國青島 高新區河東路8888號 青軟教育集團 諮詢熱線：400-658-0166 400-658-1022<br/>
<img src="images/foot_pic.jpg"></td>
</tr>
</table>
<!--底部 end-->
</body>
</html>
後記：
這次犯了一個大錯，沒有認真看要求，導致記錄的順序出現錯誤，這樣看着很難受。不想擁有太多情緒。
