读书人

简略的新闻图片页面滑动展示

发布时间: 2012-11-04 10:42:41 作者: rapoo

简单的新闻图片页面滑动展示
HTML页面代码

function init(){....    var menuDiv = document.getElementById('menuDiv');//    EventUtil.addHandler(menuDiv,'click',menuDivOnclick);    EventUtil.addHandler(menuDiv,'mouseover',menuDivOnMouseOver);    EventUtil.addHandler(menuDiv,'mouseout',menuDivOnMouseOut);        //全局变量    g_changeCounter = 1;    g_changeTimer = null;    //启动自动切换    activeTimer();}function activeTimer(){    g_changeTimer = setInterval(function(){        if(g_changeCounter == 5){            g_changeCounter = 1;        }        changeImage(g_changeCounter);        changeAcitveMenu(g_changeCounter);        g_changeCounter++;    },3000);    }function cancelTimer(index){    clearInterval(g_changeTimer);    g_changeCounter = index || 1;}function changeImage(index){    var lis = $('#divWrapper li');    for(var i=0,len = lis.length; i < len; i++){        if(i != index -1){            lis[i].className = 'hideContent';        }        else{             lis[i].className = '';        }    }}function changeAcitveMenu(index){    var menuDiv = document.getElementById('menuDiv');    var lis = menuDiv.getElementsByTagName('li');      for(var i=0,len=lis.length; i < len; i++){        if(i+1 == index){            lis[i].className = 'menuActive';        }        else{            lis[i].className = '';        }    }    }function menuDivOnclick(event){    event = EventUtil.getEvent(event);    var target = EventUtil.getTarget(event);    if(target.tagName.toLowerCase() == 'li'){        var index = target.firstChild.nodeValue;                changeAcitveMenu(index);        changeImage(index);    }}function menuDivOnMouseOver(event){    event = EventUtil.getEvent(event);    var target = EventUtil.getTarget(event);    if(target.tagName.toLowerCase() == 'li'){        var index = target.firstChild.nodeValue;                cancelTimer(index);        changeAcitveMenu(index);        changeImage(index);    }}function menuDivOnMouseOut(event){    event = EventUtil.getEvent(event);    var target = EventUtil.getTarget(event);    if(target.tagName.toLowerCase() == 'li'){            activeTimer();    }   }

读书人网 >Web前端

热点推荐