效果图
主页面index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- 导入首页轮播图css和js脚本 -->
<link type="text/css" href="css/autoplay.css" rel="stylesheet" />
<script type="text/javascript" src="js/autoplay.js"></script>
</head>
<body class="main">
<!-- 1.网上书城顶部 start -->
<div id="divhead">
<table cellspacing="0" class="headtable">
<tr>
<td>
<a href="#">
<img src="images/logo.png" width="200" height="60" border="0" />
</a>
</td>
<td style="text-align:right">
<img src="images/cart.gif" width="26" height="23" style="margin-bottom:-4px" /> <a href="#">购物车</a>
| <a href="#">帮助中心</a>
| <a href="#">我的帐户</a>
| <a href="register.html">新用户注册</a>
</td>
</tr>
</table>
</div>
<!-- 网上书城顶部 end -->
<!--2. 网上书城菜单列表 start -->
<div id="divmenu">
<a href="#">文学</a>
<a href="#">生活</a>
<a href="#">计算机</a>
<a href="#">外语</a>
<a href="#">经管</a>
<a href="#">励志</a>
<a href="#">社科</a>
<a href="#">学术</a>
<a href="#">少儿</a>
<a href="#">艺术</a>
<a href="#">原版</a>
<a href="#">科技</a>
<a href="#">考试</a>
<a href="#">生活百科</a>
<a href="#" style="color:#FFFF00">全部商品目录</a>
</div>
<div id="divsearch">
<form action="#" id="searchform">
<table width="100%" border="0" cellspacing="0">
<tr>
<td style="text-align:right; padding-right:220px">
Search
<input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"
onmouseover="this.focus();"
onclick="my_click(this, 'textfield');"
onBlur="my_blur(this, 'textfield');"/>
<a href="#">
<img src="images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/>
</a>
</td>
</tr>
</table>
</form>
</div>
<!-- 网上书城菜单列表 end -->
<!-- 3.网上书城首页轮播图 start -->
<div id="box_autoplay">
<div class="list">
<ul>
<li><img src="ad/index_ad1.jpg" width="900" height="335" /></li>
<li><img src="ad/index_ad2.jpg" width="900" height="335" /></li>
<li><img src="ad/index_ad3.jpg" width="900" height="335" /></li>
<li><img src="ad/index_ad4.jpg" width="900" height="335" /></li>
<li><img src="ad/index_ad5.jpg" width="900" height="335" /></li>
</ul>
</div>
</div>
<!-- 网上书城首页轮播图 end -->
<!--4. 公告板和本周热卖 start -->
<div id="divcontent">
<table width="900px" border="0" cellspacing="0">
<tr>
<td width="497">
<img src="images/billboard.gif" width="497" height="38" />
<table cellspacing="0" class="ctl">
<tr>
<td width="485" height="29">
尊敬的网上书城用户， <br />
为了让大家有更好的购物体验，3月25日起，当日达业务关小黑屋回炉升级！<br />具体开放时间请留意公告，感谢大家的支持与理解，祝大家购物愉快！<br />
3月23日<br />
传智播客 网上书城系统管理部<br />
</td>
</tr>
</table>
</td>
<td style="padding:5px 15px 10px 40px">
<table width="100%" border="0" cellspacing="0">
<tr>
<td>
<img src="images/hottitle.gif" width="126" height="29" />
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0">
<tr>
<td style="width:80; text-align:center">
<a href="#">
<img src="bookcover/105.jpg" width="102" height="130" border="0" />
</a>
<br />
</td>
<td style="width:80; text-align:center">
<a href="#">
<img src="bookcover/106.jpg" width="102" height="130" border="0" />
</a>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- 公告板和本周热卖 end -->
<!--5. 网上书城底部 start -->
<div id="divfoot">
<table width="100%" border="0" cellspacing="0" >
<tr>
<td rowspan="2" style="width:10%">
<img src="images/logo.png" width="195" height="50"
style="margin-left:175px" />
</td>
<td style="padding-top:5px; padding-left:50px">
<a href="#">
<font color="#747556"><b>CONTACT US</b></font>
</a>
</td>
</tr>
<tr>
<td style="padding-left:50px">
<font color="#CCCCCC">
<b>COPYRIGHT 2015 © BookStore All Rights RESERVED.</b>
</font>
</td>
</tr>
</table>
</div>
<!-- 网上书城底部 end -->
</body>
</html>
CSS
main.css
/* CSS Document */
.main {
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 150%;
color: #000000; /*#666666*/
text-align: center;
vertical-align: top;
}
a {
font-size: 12px;
color: #0066FF; /*#1E33F7*/
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0066FF;
}
a:hover {
text-decoration: none;
color: #990099; /*颜色变换*/
}
a:active {
text-decoration: none;
color: #0066FF;
}
td {
vertical-align: top;
text-align: left;
font-size: 12px;
}
hr {
color: #CCCCCC;
height: 1px;
margin-top: 5px;
margin-bottom: 5px;
padding: 0px;
overflow: hidden;
}
h1 {
font-size: 14px;
color: #000000;
text-align: left;
margin-bottom: 5px;
font-weight: bold;
display: inline;
}
.bookname {
font-size: 16px;
color: #194105;
text-align: left;
margin-bottom: 5px;
display: inline;
}
#divhead {
width: 100%;
}
.headtable {
width: 100%;
}
.headtable td {
padding: 10px 50px 25px 135px;
}
#divmenu {
width: 100%;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #b4d76d;
background-color: #000000;
text-align: center;
padding: 10px 0px 10px 0px;
font-size: 14px;
}
#divmenu a {
font-size: 14px;
color: #FFFFFF; /*#1E33F7*/
font-weight: bold;
padding: 10px 10px 10px 10px;
}
#divmenu a:link {
text-decoration: none;
font-weight: bold;
}
#divmenu a:visited {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
#divmenu a:hover {
text-decoration: none;
color: #999999; /*颜色变换*/
font-weight: bold;
}
#divmenu a:active {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
#divsearch {
width: 100%;
background-color: #f59f1d;
text-align: center;
padding: 5px 0px 5px 0px;
color: #FFFFFF;
font-weight: bold;
}
#divad {
width: 900px;
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}
#divcontent {
width: 900px;
background-color: #FCFDEF;
border: 1px solid #EEEDDB;
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}
#divpagecontent {
width: 900px;
margin-top: 10px;
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}
.listtitle {
padding: 5px 0px 5px 5px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
font-size: 14px;
font-weight: bold;
color: #1C3F09;
}
.listtd {
padding: 5px 0px 5px 30px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}
.listcontent {
background-color: #FCFDEF;
border: 1px solid #CCCCCC;
margin-left: 5px;
width: 99%;
}
.listcontent td {
padding: 20px;
}
.infocontent {
background-color: #FCFDEF;
border: 1px solid #CCCCCC;
margin-left: 5px;
width: 99%;
}
.infocontent td {
padding: 5px;
}
.booklist {
width: 100%;
margin: 0px;
padding: 0px;
}
.booklist td {
/* text-align: center; */
width: 25%;
margin: 0px;
padding:10px 0 10px 40px;
}
.divbookpic {
width: 131px;
height: 145px;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
margin-bottom: 8px;
overflow: hidden;
display: table-cell;
position: relative;
text-align: center;
vertical-align: middle;
}
.divbookpic img {
position: static;
position: relative;
top: 5%;
}
.divbookcover {
width: 300px;
height: 300px;
border: 3px solid #F3F2DE;
background-color: #FFFFFF;
margin: 8px;
overflow: hidden;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.divbookcover img {
position: static;
position: relative;
top: 5%;
padding-left: 20px;
padding-right: 20px;
}
.divlisttitle {
line-height: 120%;
text-align:left;
}
#divfoot {
width: 100%;
clear: both;
background-color: #efefef;
margin-top: 15px;
}
.ctl {
width: 490px;
margin-top: 2px;
margin-left: 2px;
table-layout: fixed;
}
.ctl td {
text-align: left;
/* text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; */
padding: 3px;
}
.inputtable {
width: 130px;
height: 18px;
border: 1px solid #999999;
}
.inputbutton {
color: #000000;
background-color: #FFFFFF;
padding: 1px;
border: 1px solid #999999;
}
/*分页*/
.pagination {
padding: 5px;
width: 790px;
margin: 5px auto;
text-align: center;
}
.pagination ul {
width:270px;
margin: 5px auto;
padding: 5px;
font-size: 12px;
}
.pagination li {
list-style-type: none;
float:left;
padding: 1px;
margin: 1px;
}
.pagination a,.pagination a:visited {
padding:5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}
.pagination li.currentpage {
font-weight: bold;
padding: 5px;
border: 1px solid navy;
background-color: #2e6ab1;
color: #FFF;
}
.disablepage_a{
display:block;
width:75px;
height:15px;
}
.disablepage_a:link,.disablepage_a:visited{!important; padding:0; border:0;}
.disablepage_a:hover{!important; padding:0; border:0; background:none; }
.pagination li.disablepage_p {
width: 75px;
height: 15px;
padding: 5px;
color: #929292;
background:url(../images/previous_page.png) no-repeat center center;
}
.pagination li.disablepage_p2 {
width: 75px;
height: 15px;
padding: 5px;
color: #929292;
background:url(../images/previous_page2.png) no-repeat center center;
}
.pagination li.disablepage_n{
width: 75px;
height: 15px;
padding: 5px;
color: #929292;
background:url(../images/next_page.png) no-repeat center center;
}
.pagination li.disablepage_n2{
width: 75px;
height: 15px;
padding: 5px;
color: #929292;background:url(../images/next_page2.png) no-repeat center center;
}
.pagination li.nextpage {
font-weight: bold;
padding: 5px;
}
/*分页*/
.upline {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #B0BEC7;
padding-top: 5px;
padding-bottom: 5px;
margin: 20px;
}
.textinput {
margin-left: 10px;
font-size: 12px;
width: 150px;
height: 18px;
border: 1px solid #A4B5BD;
}
.textarea {
margin-left: 10px;
font-size: 12px;
width: 350px;
height: 75px;
border: 1px solid #A4B5BD;
}
#logindiv {
background-image: url(../images/loginbg.gif);
width: 305px;
height: 361px;
background-repeat: no-repeat;
margin: 20px;
}
.carttable {
border: 1px solid #CCCCCC;
width: 100%;
background-color: #E1FFE1;
}
.tableopen {
text-align: center;
}
.tableopentd01 {
text-align: center;
border: 1px solid #FFFFFF;+
padding: 3px;
color: #FFFFFF;
}
.tableopentd02 {
text-align: center;
padding: 3px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #C5E0E2;
border-right-color: #C5E0E2;
border-bottom-color: #C5E0E2;
border-left-color: #C5E0E2;
}
.tableopentd03 {
text-align: center;
padding: 3px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #C5E0E2;
border-right-color: #C5E0E2;
border-bottom-color: #C5E0E2;
border-left-color: #C5E0E2;
}
.searchtable {
width: 100%;
margin-top: 10px;
margin-bottom: 20px;
border: 1px solid #CCCCCC;
}
autolay.css
body, div, ul, li {
margin:0;
padding:0;
}
ul {
list-style-type:none;
}
body {
background:#000;
text-align:center;
font:12px/20px Arial;
}
#box_autoplay {
position:relative;
width:900px;
height:335px;
background:#fff;
border-radius:5px;
border:8px solid #fff;
margin:10px auto;
cursor:pointer;
}
#box_autoplay .list {
position:relative;
width:900px;
height:335px;
overflow:hidden;
}
#box_autoplay .list ul {
position:absolute;
top:0;
left:0;
}
#box_autoplay .list li {
width:900px;
height:335px;
overflow:hidden;
}
#box_autoplay .count {
position:absolute;
right:0;
bottom:5px;
}
#box_autoplay .count li {
color:#fff;
float:left;
width:20px;
height:20px;
cursor:pointer;
margin-right:5px;
overflow:hidden;
background:#F90;
opacity:0.7;
filter:alpha(opacity=70);
border-radius:20px;
}
#box_autoplay .count li.current {
color:#fff;
opacity:1;
filter:alpha(opacity=100);
font-weight:700;
background:#f60;
}
#tmp {
width:100px;
height:100px;
background:red;
position:absolute;
}
JS
autoplay.js
//获取ID
var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id;};
//获取tagName
var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName);};
//自动播放对象
var AutoPlay = function (id) {this.initialize(id);};
AutoPlay.prototype = {
initialize: function (id)
{
var oThis = this;
this.oBox = $(id);
this.oUl = $$("ul", this.oBox)[0];
this.aImg = $$("img", this.oBox);
this.timer = null;
this.autoTimer = null;
this.iNow = 0;
this.creatBtn();
this.aBtn = $$("li", this.oCount);
this.toggle();
this.autoTimer = setInterval(function ()
{
oThis.next();
}, 3000);
this.oBox.onmouseover = function ()
{
clearInterval(oThis.autoTimer);
};
this.oBox.onmouseout = function ()
{
oThis.autoTimer = setInterval(function ()
{
oThis.next();
}, 3000);
};
for (var i = 0; i < this.aBtn.length; i++)
{
this.aBtn[i].index = i;
this.aBtn[i].onmouseover = function ()
{
oThis.iNow = this.index;
oThis.toggle();
};
}
},
creatBtn: function ()
{
this.oCount = document.createElement("ul");
this.oFrag = document.createDocumentFragment();
this.oCount.className = "count";
for (var i = 0; i < this.aImg.length; i++)
{
var oLi = document.createElement("li");
oLi.innerHTML = i + 1;
this.oFrag.appendChild(oLi);
}
this.oCount.appendChild(this.oFrag);
this.oBox.appendChild(this.oCount);
},
toggle: function ()
{
for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = "";
this.aBtn[this.iNow].className = "current";
this.doMove(-(this.iNow * this.aImg[0].offsetHeight));
},
next: function ()
{
this.iNow++;
this.iNow == this.aBtn.length && (this.iNow = 0);
this.toggle();
},
doMove: function (iTarget)
{
var oThis = this;
clearInterval(oThis.timer);
oThis.timer = setInterval(function ()
{
var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + "px");
}, 30);
}
};
window.onload = function ()
{
new AutoPlay("box_autoplay");
};
版权声明：本文为qq_48666555原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。