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

mutongwu · 发表于 2013-2-7 22:49:39

HTML页面代码

<body ><h2>Tab Menu 6</h2><div id="div1"><div id="divWrapper"><ul><li id="cnt1" class="showContent"><div class="imgDiv"><a href="#"><img class="imgCls" src="img/1.jpg" title="标题标题标题标题标题标题1" /></a></div><div class="opacityBg"></div><div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题1</span></a></div></li><li id="cnt2" class="hideContent"><div class="imgDiv"><a href="#"><img class="imgCls" src="img/2.jpg" title="标题标题标题标题标题标题2" /></a></div><div class="opacityBg"></div><div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题2</span></a></div></li><li id="cnt3" class="hideContent"><div class="imgDiv"><a href="#"><img class="imgCls" src="img/3.jpg" title="标题标题标题标题标题标题3" /></a></div><div class="opacityBg"></div><div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题3</span></a></div></li><li id="cnt4" class="hideContent"><div class="imgDiv"><a href="#"><img class="imgCls" src="img/4.jpg" title="标题标题标题标题标题标题4" /></a></div><div class="opacityBg"></div><div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题4</span></a></div></li></ul></div><div id="menuDiv"><ul><li class="menuActive">1</li><li>2</li><li>3</li><li>4</li></ul></div></div><div style="clear:both;margin:0px;padding:0px;border:1px solid #000;diplay:block">some other message</div></body>

相关CSS

/* ie6的hack */*{margin:0px;padding:0px;border:none;}body{}ul,li{list-style-type:none;}img{border:none;}/*---------------------------------------------------------------*/#div1{display:block;margin-left:300px;background-color:#ccc;width:300px;}#divWrapper{width:300px;height:300px;overflow:hidden;}.imgDiv{height:282px;}.imgCls{width:300px;height:320px;}.opacityBg{position:relative;border:none;width:300px;height:20px;background-color:#99ccff;filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}.imgTitle{position:relative;top:-20px;}.imgTitle a{font:90%;text-decoration :none;color:#000;}.imgTitle a:hover{font:90%;color:#990000;text-decoration :underline ;}/*------------------------------------------------------*/#menuDiv{width:300px;background-color:#999;}#menuDiv ul{display:inline;margin-left:200px;padding:0px;background-color:#999;}#menuDiv ul li{color:#fff;background-color:#000;display:inline;cursor:pointer;padding:0 2px;margin:0 2px;}/*.showContent{display:block;}*/.hideContent{display:none;}#menuDiv ul li.menuActive{color:#fff;background-color:#ff0000;}

实现的js

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(); } }

		自动登录	找回密码
密码			立即注册

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

浏览过的版块