<!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>QQQ图片轮播</title>
<style type="text/css">
#zw{width:640px;height:490px;margin:auto;background-color:#333}
#dt{padding-top:10px;padding-left:10px;}
#wz_bg,#wenzi{ width:620px;height:60px; position:absolute; top:328px;}
#wz_bg{background-color:#333;filter:alpha(opacity=45);opacity:0.45}/*IE用前面，火狐用后面*/
#wenzi{ width:500px;color:#FFF;font-weight:bolder; padding-left:30px; padding-top:15px;font-size:20px;}
#xt1,#xt2,#xt3,#xt4{float:left; margin-left:8px; margin-top:10px;}
.changed{ border-bottom:#F00 3px solid;}
.notChanged{border-bottom::none;}
.show{display=block;}
.hidden{display:none;}
</style>
<script type="text/javascript">
//我的QQ：323101530喜欢网页应用的朋友可以加我哦！
//如果有什么问题可以发邮件，
//我对Java和网页感兴趣。
var title = new Array();
title[0]="柳岩低遭追拍，打趣称“不要看我胸";
title[1]="《命运交响曲》首播，杨幂不惧与范冰冰比较";
title[2]="莫文蔚自曝婚鞋设计，称过两天便会正式曝光";
title[3]="偷学明星祛斑法，师大“斑花”居然白过范冰冰";
var nowFrame=2;
var maxFrame=4;
var theTime;
function play(num){
if(Number(num)){
nowFrame=num;
}
else{
if(nowFrame==maxFrame)
nowFrame=1;
else
nowFrame++;
}
for(var i=0;i<maxFrame;i++){
if((i+1)==nowFrame){
var dtid="dt_"+(i+1);
var xtid="xt"+(i+1);
document.getElementById(dtid).className="show";
document.getElementById(xtid).className="changed";
document.getElementById("wenzi").innerHTML=title[i];
}else{
var dtid="dt_"+(i+1);
var xtid="xt"+(i+1);
document.getElementById(dtid).className="hidden";
document.getElementById(xtid).className="notChanged";
}
}
}
theTime = setInterval("play()",2000);
function next(){
//setInterval("play()",2000);
}
</script>
</head>
<body>
<div id="zw">
<div id="dt">
<div id="wz_bg"></div><!--文字背景DIV-->
<div id="wenzi">柳岩低遭追拍，打趣称"不要看我胸</div><!--文字DIV-->
<div>
<img id="dt_1" src="Image/liuyan.jpg" width="620" height="370" />
<img id="dt_2" class="hidden" src="Image/yangmi.jpg" width="620" height="370" />
<img id="dt_3" class="hidden" src="Image/mowenwei.jpg" width="620" height="370" />
<img id="dt_4" class="hidden" src="Image/quban.jpg" width="620" height="370" />
</div><!--大图结束-->
</div><!--大图DIV结束-->
<div id="xt1" onmousemove="play(1)" onmouseout="next()" class="changed"><img src="Image/ly.jpg" width="150" height="90" /></div>
<div id="xt2" onmousemove="play(2)" onmouseout="next()"><img src="Image/ym.jpg" width="150" height="90" /></div>
<div id="xt3" onmousemove="play(3)" onmouseout="next()"><img src="Image/mww.jpg" width="150" height="90" /></div>
<div id="xt4" onmousemove="play(4)" onmouseout="next()"><img src="Image/qb.jpg" width="150" height="90" /></div>
</div>
</body>
</html>
Javascript图片轮播（模仿QQ图片首页轮播效果）
5星 · 超过95%的资源 需积分: 12 56 浏览量
2011-09-30
10:12:33
上传
评论
收藏 262KB ZIP 举报 
QQ_ent首页图片轮播2.zip （9个子文件） 
QQ_ent首页图片轮播 
QQlunbo_1.html 3KB Image 
ly.jpg 17KB yangmi.jpg 44KB mww.jpg 6KB qb.jpg 5KB liuyan.jpg 54KB mowenwei.jpg 78KB ym.jpg 4KB quban.jpg 59KB资源评论
wangjx152012-11-21可以直接使用 简单粗暴 功能都实现了- 黑内酷2014-12-12很好！功能都实现了
- 鱼生札记2012-06-03一般吧，不是很炫的那种
