``` auto=null;
timer=null;
var focus=new Function();
focus.prototype={
init:function(){
this.aTime=this.aTime || 10;
this.sTime=this.sTime || 5000;
this.oImg=document.getElementById('focus_m').getElementsByTagName("ul")[0];
this.oImgLi=this.oImg.getElementsByTagName("li");
this.oL=document.getElementById('focus_l');
this.oR=document.getElementById('focus_r');
this.createTextDom();
this.target=0;
this.autoMove();
this.oAction(); },
createTextDom:function(){
var that=this;
this.oText=document.createElement("div");
this.oText.className="focus_s";
var ul=document.createElement('ul');
var frag=document.createDocumentFragment();
for (var i=0;i<this.oImgLi.length;i++) {
var li=document.createElement("li");
li.innerHTML='<b></b>';
if (i==0) {
li.className="active";
};
frag.appendChild(li);
};
ul.appendChild(frag);
this.oText.appendChild(ul);
this.o.insertBefore(this.oText,this.o.firstChild);
this.oTextLi=this.oText.getElementsByTagName("li"); },
autoMove:function(){
var that = this;
auto=setInterval(function(){that.goNext()},that.sTime);},
goNext:function() {
this.target=this.nowIndex();
this.target==this.oTextLi.length-1 ? this.target=0:this.target++;
this.aStep=(this.target-this.nowIndex())*this.step;
this.removeClassName();
this.oTextLi[this.target].className="active";
this.startMove(); },
goPrev:function() {
this.target=this.nowIndex();
this.target==0 ? this.target=this.oTextLi.length-1 : this.target--;
this.aStep=(this.target-this.nowIndex())*this.step;
this.removeClassName();
this.oTextLi[this.target].className="active";
this.startMove(); },
startMove:function (){
var that=this;
var t=0;
this.timer='';
function set(){
if (t>100) {
clearInterval(that.timer);
}else {
for (var i=0;i<that.oImgLi.length;i++) {
that.oImgLi[i].style.display='none';
};
that.oImgLi[that.target].style.display='block';
that.setOpacity(that.oImg,t);
t+=5;};};
timer=setInterval(set,that.aTime);},
setOpacity:function(elem,level){
if(elem.filters){
elem.style.filter = 'alpha(opacity=' + level + ')';
elem.style.zoom = 1;
} else {
elem.style.opacity = level / 100;
};
},
nowIndex:function(){
for (var i=0;i<this.oTextLi.length;i++) {
if (this.oTextLi[i].className=='active') {
return i;
break;}};},
oAction:function(){
var that=this;
for (var i=0;i<this.oTextLi.length;i++) {
this.oTextLi[i].index=i;
this.oTextLi[i].onclick=function(){
clearInterval(auto);
clearInterval(timer);
that.setOpacity(that.oImg,100);
that.target=this.index;
that.removeClassName();
this.className='active';
that.startMove();}};
mouseEnter (that.o,'mouseleave',function(e){
clearInterval(auto);
that.autoMove();});
this.oL.onclick=function(){
that.goPrev();};
this.oR.onclick=function(){
that.goNext();};},
removeClassName:function(){
for (var i=0;i<this.oTextLi.length;i++) {
this.oTextLi[i].className=""};}};
var focusRun=new focus();
focusRun.o=document.getElementById("focus");
function mouseEnter(ele,type,func){
if(window.document.all)
ele.attachEvent('on'+type,func);
else{//ff
if(type==='mouseenter')
ele.addEventListener('mouseover',this.withoutChildFunction(func),false)
else if(type==='mouseleave')
ele.addEventListener('mouseout',this.withoutChildFunction(func),false);
else
ele.addEventListener(type,func,false); };};
function withoutChildFunction(func){
return function(e){
var parent=e.relatedTarget;
while(parent!=this&&parent){
try{
parent=parent.parentNode;}
catch(e){
break;}}
if(parent!=this)
func(e);};};
window.onload=function(){
focusRun.init();};
很基础的api
document.getElementById通过Id获取dom对象
xxx.getElementsByTagName,通过dom标签名获取xxx对象的dom集合,注意是集合
document.createElement,通过标签名创建dom对象
document.createDocumentFragment,创建文档片段对象
xxx.appendChild,往xxx这个dom中添加dom
xxx.className用于获取或者设置xxx这个dom的样式
然后其他就是一些逻辑控制和dom的内联属性对象操作 xxx,style,设置透明的时候做了兼容判断,如果支持filter就设置filter属性(比如IE8不支持opacity,需要设置filter属性),否则设置opacity属性。
题主有哪些还不理解的可以单独提出来,注释大概如下,题主这个代码太老了,至少7,8年前的代码了
auto = null
timer = null;
//上面2个变量存储setInterval计时器的句柄
var focus = new Function();//生成一个新的空函数,等价于var focs=function(){};
focus.prototype = {//设置函数的原型方法,es5面向对象经常用到的
init: function () {//初始化方法
this.aTime = this.aTime || 10;//startMove中计时器定时执行的间隔,为传递配置则默认10毫秒
this.sTime = this.sTime || 5000;//autoMove中计时器定时执行的间隔,为传递配置则默认5000毫秒(5s)
this.oImg = document.getElementById('focus_m').getElementsByTagName("ul")[0];//获取id为focus_m这个dom下的第一个ul对象,getElementsByTagName返回dom数组,所有要转dom需要[0]取值
this.oImgLi = this.oImg.getElementsByTagName("li");//获取ul下的所有li
this.oL = document.getElementById('focus_l');//获取左移动按钮dom
this.oR = document.getElementById('focus_r');//获取右移动按钮dom
this.createTextDom();//调用createTextDom创和oImgLi长度一样的导航点容器,由于没有html和样式,猜测是这样
this.target = 0;//当前播放的图片
this.autoMove();//开始自动播放计时器
this.oAction();//调用给导航容器添加事件的方法
},
createTextDom: function () {//生成导航的的点使用的
var that = this;
this.oText = document.createElement("div");//创建新的div,并往这个div中添加ul,li
this.oText.className = "focus_s";
var ul = document.createElement('ul');
var frag = document.createDocumentFragment();//这个没什么必要,下面的frag.appendChild(li);可以直接改为ul.appendChild(li);去掉ul.appendChild(frag);
for (var i = 0; i < this.oImgLi.length; i++) {
var li = document.createElement("li");
li.innerHTML = '<b></b>';
if (i == 0) {
li.className = "active";
};
frag.appendChild(li);
};
ul.appendChild(frag);
this.oText.appendChild(ul);
this.o.insertBefore(this.oText, this.o.firstChild);
this.oTextLi = this.oText.getElementsByTagName("li");
},
autoMove: function () {//自动播放动画方法
var that = this;
auto = setInterval(function () { that.goNext() }, that.sTime);
},
goNext: function () {//播放下张图片的方法
this.target = this.nowIndex();//看nowIndex放解释
//最后一张则播放第一张,否则播放下一张
this.target == this.oTextLi.length - 1 ? this.target = 0 : this.target++;
this.aStep = (this.target - this.nowIndex()) * this.step;//这个变量没用到,目测是用来实现左右移动效果用的,现在的效果为渐变所以没使用
this.removeClassName();
this.oTextLi[this.target].className = "active";//设置对应导航点获得焦点样式
this.startMove();//开始透明渐变动画
},
goPrev: function () {//播放上张图片的方法
this.target = this.nowIndex();
//这个同理,第一张则切换到最后一张,否则播放上一张图片
this.target == 0 ? this.target = this.oTextLi.length - 1 : this.target--;
this.aStep = (this.target - this.nowIndex()) * this.step;
this.removeClassName();
this.oTextLi[this.target].className = "active";
this.startMove();//开始透明渐变动画
},
startMove: function () {//透明渐变动画效果方法
var that = this;
var t = 0;
this.timer = '';
function set() {//设置ul的透明度,从0~100渐变显示出来
if (t > 100) {
clearInterval(that.timer);//透明度达到100后停止动画
} else {
for (var i = 0; i < that.oImgLi.length; i++) {//设置所有图片li容器不显示
that.oImgLi[i].style.display = 'none';
};
that.oImgLi[that.target].style.display = 'block';//显示当前播放到的图片
that.setOpacity(that.oImg, t);//设置ul的透明度
t += 5;
};
};
timer = setInterval(set, that.aTime);
},
setOpacity: function (elem, level) {//设置dom透明度方法
if (elem.filters) {//支持filter
elem.style.filter = 'alpha(opacity=' + level + ')';
elem.style.zoom = 1;
} else {
elem.style.opacity = level / 100;
};
},
nowIndex: function () {//获取当前焦点样式的导航下标
for (var i = 0; i < this.oTextLi.length; i++) {
if (this.oTextLi[i].className == 'active') {
return i;
break;
}
};
},
oAction: function () {
var that = this;
for (var i = 0; i < this.oTextLi.length; i++) {//给导航点添加click事件
this.oTextLi[i].index = i;//自定义属性index存储i的值,这个涉及到闭包,onclick中不能直接使用i变量,除非var改为let,这个题主要了解自己百度下
this.oTextLi[i].onclick = function () {
clearInterval(auto);//清除自动播放计时器
clearInterval(timer);//清除透明动画计时器
that.setOpacity(that.oImg, 100);//设置容器透明度直接显示
that.target = this.index;//设置当前播放到变量下标为当前点击的导航对应的下标
that.removeClassName();
this.className = 'active';
that.startMove();//开始动画
}
};
mouseEnter(that.o, 'mouseleave', function (e) {//给焦点图总容器添加mouseleave事件重启动画
clearInterval(auto);
that.autoMove();
});
this.oL.onclick = function () {//点击上一张按钮事件
that.goPrev();
};
this.oR.onclick = function () {//点击下张按钮事件
that.goNext();
};
},
removeClassName: function () {//清除导航焦点样式的方法
for (var i = 0; i < this.oTextLi.length; i++) {
this.oTextLi[i].className = ""
};
}
};
var focusRun = new focus();//生成focus类实例
focusRun.o = document.getElementById("focus");//给实例动态添加o属性,focus应该所有切换效果的图片容器
function mouseEnter(ele, type, func) {
if (window.document.all)//ie时间绑定
ele.attachEvent('on' + type, func);
else {//ff,chrome标准浏览器事件绑定,其实现在使用的所有浏览器已经支持mouseenter,mouseleave,直接绑定这2个事件就行,很老的版本付Firefox10,chrome10以下的不支持这2个事件,需要用mouseover,mouseout替代
if (type === 'mouseenter')
ele.addEventListener('mouseover', this.withoutChildFunction(func), false)
else if (type === 'mouseleave')
ele.addEventListener('mouseout', this.withoutChildFunction(func), false);
else
ele.addEventListener(type, func, false);
};
};
function withoutChildFunction(func) {//这个是防止移动到子对象也会触发mouseover,mouseout事件用的,只有实际移动出容器而不是子对象上才会触发
return function (e) {
var parent = e.relatedTarget;
while (parent != this && parent) {
try {
parent = parent.parentNode;
}
catch (e) {
break;
}
}
if (parent != this)
func(e);
};
};
window.onload = function () {//注册onload时间然后初始化效果
focusRun.init();
};
这是一段JS代码