网站广告也玩分页显示
技术与开发
我是一个小型网站的站长，想利用广告的收入为自己减轻一点负担。但又担心广告位多了会引起访客的反感。我在迅雷等大型网站看到它们的广告都是区域内显示一张图片，每隔几秒图片和相应广告按钮就会自动变化。请问，这种广告效果是如何实现的？
这种效果要实现并不困难，小型网站同样可以轻易做到，我们利用的是JavaScript和Div。Div是用来标记广告的，每个广告都要配一个Div，然后用JavaScript来控制广告的Div是显示还是隐藏，最后设计一个定时器使它每隔一段时间自动切换广告即可。
Div相当于网页中的一种容器，可以存放任何HTML元素。它具有可定位性强的特点。在设计导航栏时我们可以用它来做下拉菜单，论坛中还可以被用来制作滚动的公告板。
第一步：新建广告页面
打开网页编辑软件 DreamWeaver，按下组合键“ Ctrl+N”打开“新建文档”对话框。单击对话框左边的“空白页”，然后选择“页面类型”下方的“HTML”，再点击“布局”下方的 “<无>”，最后单击“创建”按钮即可创建页面。接着，将光标定位到页面中＜body＞和＜/body＞之间，输入特定代码（代码下载地址：http://www.cpcw.com/bzsoft）。
第二步：设计广告的外观
我们用CSS来实现广告的显示，将代码输入到HTML文件的上方即可，关键代码如下所示（完整代码下载地址：http://www.cpcw.com/bzsoft）：
.ad_div {
display: block; /* 使网页元素可设置大小 */
width: 300px; /* 宽度 */
height: 80px; /* 高度 */
}
/* 此类设置切换广告的按钮的外观 */
.switch_button {
display: block;
height: 20px;
width: 20px;
background-color: #000000; /* 背景颜色 */
color: #FFFFFF; /* 字体颜色 */
text-align: center; /* 文字居中 */
float: left; /* 可使网页元素横排 */
border: 1px #CCCCCC solid; /* 边框宽度、颜色和线条类型 */
}
小知识：CSS是Cascading Style Sheets(层叠样式表)的简称。用它可以控制网页中各种元素的外观。用CSS的好处之一是重复利用率高，只编写一次就可以重复使用于多个网页元素中。
第三步：编写广告自动切换代码
我们用JavaScript来控制网页元素的显示和隐藏，将下面的代码输入到＜/style＞和＜/head＞之间。
＜script language="javascript"＞
var ad_count = 3; // 广告总数
var ad_page_index = 1; // 当前正在显示的广告的索引
// 切换广告的自定义函数
function switch_ad(show_ad_index)
{
for(var i = 1; i ＜= ad_count; i++) {
// 通过循环，隐藏所有显示广告的 Div
document.getElementById("ad_div" + i).style.display = "none";
// 通过循环，设置所有切换广告的按钮的 Class 属性恢复普通外观
document.getElementById("switch_butt on" + i).className = "switch_button";
}
// 显示 Id 属性中含有 "show_ad_ index" 参数传过来的数字的 Div
document.getElementById("ad_div" + show_ad_index).style.display = "block";
// 设置当前广告的按钮的 Class 属性使它外观与其他按钮的外观不同
document.getElementById("switch_butt on" + show_ad_index).className = "switch _button switch_button_active";
}
// 自动切换广告的函数
function auto_switch() {
// 已显示完最后一个广告， 设置 ad_page_index 变量后调用 switch_ad 函数会显示第一个广告，否则显示下一个广告
if(ad_page_index == ad_count) {
ad_page_index = 1;
} else {
ad_page_index++;
}
switch_ad(ad_page_index);
}
＜/script＞
第四步：添加广告按钮和定时器
控制广告显示、隐藏的代码有了，还需要制作一些广告按钮和设置一个定时器。其中定时器的作用是隔一段时间就自动切换广告。将下面的代码输入到