简单的新闻图片页面滑动展示
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(); } }