功能整合（二）：轮播图（可控）、事件流

1.轮播图

可实现：

自动轮播（加载完成后调用定时器）、鼠标移入停止（停止定时器）、鼠标移出开始（开始定时器），点击切换（点击事件）

window.onload = function(){
    /*轮播图*/
    //自动加载
    s = setInterval(down,2000);
}
/*控制轮播图的定时器*/
//定义一个变量作为数组下标
var lbnum = 0;
function down(yyNum){
    //定义一个图片路径数组
    var lbimgArr = ['../resoures/images/shouye/24401108web1.png','../resoures/images/shouye/2440_1.png','../resoures/images/shouye/412pcshoujiao244011081.png'];
    //找到图片所在的div
    var bann = document.getElementById('banner');
    //找到小圆圈存为数组
    var yArr = document.getElementsByClassName('xyy');
    //自动给小圆圈设置样式
    for(var i = 0;i < yArr.length; i++){
        yArr[i].style.backgroundPosition = '0px 0px';
    }
    if(yyNum == 0 || yyNum == 1 || yyNum == 2){
        lbStop();
        yArr[yyNum].style.backgroundPosition = '0px -18px';
        bann.setAttribute('src',lbimgArr[yyNum]);
    }else{
        yArr[lbnum].style.backgroundPosition = '0px -18px';
        bann.setAttribute('src',lbimgArr[lbnum]);
        lbnum++;
        if(lbnum == lbimgArr.length){
            lbnum = 0;
        }
    }
}
//开始定时器
function lbStart(){
    s = setInterval(down,2000);
}
//停止定时器
function lbStop(){
    clearInterval(s);
}

2.事件流

多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”。

比如：给一个大的div加鼠标移出事件，只要鼠标放在子级元素上就会被判定为移出。

以下两个都可以添加事件，但是如果与事件流有关，要用Add..

obj.setAttribute('onClick','show()');　　//不能取消事件流
obj.addEventListener('click',show());　　//可以取消事件流

function appOut(overNum){    //根据情况，可给事件传参
    function isMouseLeaveOrEnter(e, handler) {    
        var reltg=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement;    
            while (reltg && reltg != handler){
             reltg = reltg.parentNode; 
            }       
        return (reltg != handler);    
        } 
        //找到默认显示的div
        var div1 = document.getElementsByClassName('onMover')[overNum];
        //找到默认隐藏的div
        var div2 = document.getElementsByClassName('divb_t')[overNum];
        div2.onmouseout=function(ev){
        var ev=ev||window.event;
        if(!isMouseLeaveOrEnter(ev,div2)){
          return false;
        }
        div2.style.height = '310px';
        div2.style.display = 'none';
        div1.style.opacity = '1';
        }
}