简略的新闻图片页面滑动展示
简单的新闻图片页面滑动展示
HTML页面代码
相关CSS
实现的js
HTML页面代码
<body onload="init();"> <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 */ <!--[if ie 6]> <style> .opacityBg{ top:-45px; } .imgTitle{ top:-63px; } </style> <![endif]--> *{ 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(); } }