<!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>
<style>
/*把body,div,ul,li的内外边距全部重置为0，并在下面重新设置，以保证轮播图在各浏览器中展示的效果一致*/
body, div, ul, li {
margin: 0;
padding: 0;
}
ul {
list-style-type: none; /*去除列表样式*/
}
body {
background: #000; /*文档背景色设置为黑色*/
text-align: center; /*居中对齐*/
font: 12px/20px Arial;/*设置字号，行间距和字体*/
}
#box {
position: relative;/*这是最外部的div包含元素，需设置为相对*/
width: 492px;
height: 172px;
background: #fff;/*轮播图框背景设置为白色*/
border-radius: 5px;
border: 8px solid #fff;
margin: 10px auto;
cursor: pointer;
}
#box .list {
position: relative;/*这是第2个div包含元素，需设置为相对*/
width: 490px;/*内部div高度比外部div少2px，以此组成2px宽的外边框*/
height: 170px;
overflow: hidden;
}
#box .list ul {
position: absolute; /*内部轮播图的定位，须设置为绝对*/
top: 0;
left: 0;
}
#box .list li {
width: 490px;
height: 170px;
overflow: hidden;
}
/*count元素由script动态生成，定位于父元素的右下角*/
#box .count {
position: absolute;
right: 0;
bottom: 5px;
}
#box .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 .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;
}
</style>
<script type="text/javascript">
//获取ID（此函数为原代码所有）
// var $ = function (id) {
//使用tpeof操作符检测传入的参数是否为字符串，为真，则传递给getElementById命令，返回一个对象
//在下面的代码中，将使用此函数获取文档最外层的id名为"box"的元素引用。
// return typeof id === "string" ? document.getElementById(id) : id
//};
//获取tagName（此函数为原代码所有）
//var $$ = function (tagName, oParent) {
//此函数即是传入由获取id函数返回的对象，并用此对象调用getElementsByTagName方法，获取内部标签名，
//最后返回一个由标签名构成的数组。
// return (oParent || document).getElementsByTagName(tagName)
// };
//自动播放对象
var AutoPlay = function (id) {
//定义对象，此对象有一个方法，接受名为"id"的参数。
this.initialize(id)
};
//给AutoPlay对象添加原型字面量，由多个方法和属性组成
//在变量命名方面，使用了匈牙利命名法，
AutoPlay.prototype = {
initialize: function (id)
{
//把this赋值给oThis，因为当函数以函数方式调用时，this指针会被错误绑定到全局对象上，
//进而无法访问内部各属性与方法，采用这种方式就可避免此问题
//通常会命名为that或self,此处采用匈牙利命名法,oThis中的"o"，表示是一引用类型
var oThis = this;
//调用$函数，获取最外层的div引用，可用下面这行代码替换
//this.oBox = $(id);
this.oBox = document.getElementById("box");
//获取div元素中的无序列表ul中的第一项引用
//this.oUl = $$("ul", this.oBox)[0];
this.oUl = document.getElementById("box").getElementsByTagName("ul")[0];
//this.oUl = this.oBox.getElementsByTagName("ul")[0];
//获取img对象
//this.aImg = $$("img", this.oBox);
this.aImg = document.getElementById("box").getElementsByTagName("img");
//this.aImg = this.oBox.getElementsByTagName("img");
//定义计时器，值为null表示其值应为一个对象
this.timer = null;
//定义自动计时器，值为null表示它的值应为一个引用（对象）
this.autoTimer = null;
//当前轮播图按钮索引值，i表示它应为整型
this.iNow = 0;
//利用script动态创建轮播图按钮
this.creatBtn();
//获取按钮
//this.aBtn = $$("li", this.oCount);
this.aBtn = this.oCount.getElementsByTagName("li");
//声明切换方法
this.toggle();
//定义自动计时器，每3000毫秒(每3秒)切换至下一张图片
this.autoTimer = setInterval(function ()
{
oThis.next()
}, 3000);
//注册"mouseover"事件处理程序，当鼠标移入出后，清除自动计时器，此时图片静止，停止切换
this.oBox.onmouseover = function ()
{
clearInterval(oThis.autoTimer)
};
//注册"mouseout"事件处理程序，当鼠标移出后，恢复自动计时器，自动切换
this.oBox.onmouseout = function ()
{
oThis.autoTimer = setInterval(function ()
{
oThis.next()
}, 3000)
};
//for循环遍历轮播图按钮，注册mouseover事件处理程序，当鼠标指针悬浮悬浮于按钮上时，
//调用toggle()方法，切换至此图
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方法
creatBtn: function ()
{
//创建ul元素
this.oCount = document.createElement("ul");
//创建文档片段对象，将创建的li元素附着在片段对象上，最后再添加到ul元素上
this.oFrag = document.createDocumentFragment();
//添加类名
this.oCount.className = "count";
//for循环创建li元素，并添加到文档片段对象上
for (var i = 0; i < this.aImg.length; i++)
{
var oLi = document.createElement("li");
oLi.innerHTML = i + 1;//轮播图片序号
this.oFrag.appendChild(oLi)
}
//把文档片段添加到ul元素上
this.oCount.appendChild(this.oFrag);
//把ul添加到div元素上
this.oBox.appendChild(this.oCount)
},
//定义toggle方法
toggle: function ()
{
//遍历按钮并设置其类名为空
for (var i = 0; i < this.aBtn.length; i++)
this.aBtn[i].className = "";
//为要切换至的图片设置类名
this.aBtn[this.iNow].className = "current";
//调用doMove方法，并传入偏移量
this.doMove(-(this.iNow * this.aImg[0].offsetHeight))
},
//定义next()方法
next: function ()
{
this.iNow++;
this.iNow == this.aBtn.length && (this.iNow = 0);
this.toggle()
},
//定义doMove方法
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");
};
</script>
</head>
<body>
<!--文档主体结构由两个dvi包裹一个ul无序列表构成，内外div大小差2px，构成一个白色的方框，包裹着轮播图-->
<div id="box">
<div class="list">
<ul>
<li><img src="img/01.jpg" width="490" height="170" /></li>
<li><img src="img/02.jpg" width="490" height="170" /></li>
<li><img src="img/03.jpg" width="490" height="170" /></li>
<li><img src="img/04.jpg" width="490" height="170" /></li>
<li><img src="img/05.jpg" width="490" height="170" /></li>
</ul>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号