<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻切换-图片切换</title>
<style type="text/css">
*{ margin:0px; padding:0px; border:0px;}
#box{ width:650px; height:450px; background:#000;position:relative; overflow:hidden; }
#pics{ position:absolute; width:100%; height:100%; }
#pics a{ position:absolute; z-index:1; display:block;}
#bottom{ position:absolute; z-index:10; width:100%; height:30px; background:rgba(0,0,0,0.5); bottom:0px; }
/*默认按钮样式*/
#bottom .bt{ width:10px; height:10px; background:#d2d3d4; margin:10px 10px 0px 0px; float:right;}
/*被选中的按钮样式*/
#bottom .bt_on{ background:#30b1eb;}
</style>
<script type="text/javascript">
var currIndex=1;
var timer=null;
function init(){
//生成5个按钮
var len=5;
btn=document.getElementById('bottom');
for(var i=0;i<len;i++){
btn.innerHTML+='<div class="bt" index="'+(len-i)+'"></div>';
}
//a=btn.innerHTML;
//alert(a);
//默认按钮每隔3秒滑动一次
timer=setInterval(function (){
if(currIndex+1>5){
currIndex=0;
}
slideTo(currIndex+1);
},3000);
var pics=document.getElementById('pics');
pics.onmouseover=function(){
clearInterval(timer);
}
pics.onmouseout=function(){
timer=setInterval(function (){
if(currIndex+1>5){
currIndex=0;
}
slideTo(currIndex+1);
},3000);
}
}
function slideTo(index){
index=parseInt(index); //处理成整型数据
var picArr=document.getElementById('pics').childNodes;
//alert(picArr.length);
for(var i=0; i<picArr.length;i++){
if( picArr[i].attributes
&& picArr[i].attributes['index']
&& parseInt(picArr[i].attributes['index'].value)==index ){
picArr[i].style.zIndex=2;
currIndex=index;
}else if(picArr[i].attributes
&& picArr[i].attributes['index']){
picArr[i].style.zIndex=1;
}
}
var btns=document.getElementsByClassName('bt'); //找到所有类名是bt的按钮
for(var i=0;i<btns.length;i++){
if(parseInt(btns[i].attributes['index'].value)==index){
btns[i].className='bt bt_on';
}else{
btns[i].className='bt';
}
}
}
</script>
</head>
<body onload="init()">
<div id="box">
<div id="pics">
<a href="#" style="z-index:2" index="1"><img src="images/2.jpg" /></a>
<a href="#" style="z-index:1" index="2"><img src="images/3.jpg" /></a>
<a href="#" style="z-index:1" index="3"><img src="images/2.jpg" /></a>
<a href="#" style="z-index:1" index="4"><img src="images/3.jpg" /></a>
<a href="#" style="z-index:1" index="5"><img src="images/2.jpg" /></a>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
关于轮播
最新推荐文章于 2024-06-07 10:04:25 发布