简单的新闻图片页面滑动展示-优快云博客

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