|
<!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">
<title>games.qq.com大屏轮播</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript" type="text/javascript" src="http://games.qq.com/z/cj2013/js/jquery.min.js"></script>
<style>
/* 轮播图 */
#bigpic { width:100%; height:425px; background:#191916 url(/gamezone/z/cj2013/img/i_36.png) center top no-repeat;}
.carousel { margin:0 auto; width:100%; height:425px;}
#container { width:100%; height:390px;}
/* 轮播图 */
#flash {
width:1000px;
height:425px;
overflow:hidden;
margin:0 auto;
clear:both;
position:relative;/*--*/
}
#flash a {
width:1000px;
height:425px;
display:none;
position:relative;
}
#flash a span {
position:absolute;
left:0;
top:305px;
display:block;
width:1000px;
height:35px;
line-height:34px;
background:url(/gamezone/z/cj2013/img/i_39.png) center top no-repeat;
text-align:center;
font-size:18px;
font-weight:bold;
color:#ffffff;
}
.flash_bar {
position:relative;
width:1000px;
padding-top:9px;
top:-77px;
z-index:69;
height:69px;
overflow:hidden;
background:url(/gamezone/z/cj2013/img/i_40.png) no-repeat;
text-align:center;
margin:0 auto;
}
.flash_bar .dq {
width:94px;
height:59px;
margin:5px 5px; /* background: url(tg_flash_p.png) no-repeat 0px 0px;*/
cursor:pointer;
display:inline;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/uploadfile/show2011/120215001/iamges/tg_flash_p.png", sizingMethod="crop");
}
.flash_bar .dq img {
border:2px solid #ffffff;
}
.flash_bar .no {
display:inline;
width:94px;
height:59px;
margin:5px 5px; /* background: url(tg_flash_p.png) no-repeat 0px 0px;*/
cursor:pointer;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/uploadfile/show2011/120215001/iamges/tg_flash_p2.png", sizingMethod="crop");
}
.flash_bar .no img {border:2px solid #3c3c3c;;
}
#flashBg {
height:425px;
overflow:hidden;
width:100%;
clear:both;
margin:0;
padding:0;
}
#flashLine {
background:url(/gamezone/z/cj2013/img/i_41.png) repeat-x center bottom;
height:425px;
width:100%;
clear:both;
}
</style>
</head>
<body>
<div id="ztg_3" class="layout_r1">
<div class="col_1">
<div class="mod_zt_6" id="ztu_3">
<div class="bd">
<div class="inner">
<div class="zt_c_10" id="ztc_20">
<div id="bigpic">
<!-- 焦点图 -->
<div id="flashBg" style="background-color: rgb(11, 11, 11); ">
<div id="flashLine">
<div id="flash">
<a href="http://games.qq.com/zt2013/2013txxz/index.htm" target="_blank" id="flash1" style="display: block;background:url(/pics/hv1/22/127/1378/89636857.jpg) center top no-repeat; " name="#e8eaed"><span>腾讯游戏神秘大作曝光 宣布代理FIFA Online3</span></a>
<a href="http://games.qq.com/a/20130724/005023.htm" target="_blank" id="flash2" name="#3c3045" style="display: none;background:url(/pics/hv1/42/237/1377/89599902.jpg) center top no-repeat; "><span>陈一冰SKY“王见王” 腾讯明星慈善电竞赛圆满落幕</span></a>
<a href="http://games.qq.com/a/20130725/011574.htm" target="_blank" id="flash3" name="#ecf7ec" style="display: none;background:url(/pics/hv1/108/77/1379/89689218.jpg) center top no-repeat; "><span>女神麻生希将现身CJ 拍决战大洋同名电影</span></a>
<a href="http://games.qq.com/a/20130724/014986.htm" target="_blank" id="flash4" name="#15616e" style="display: none;background:url(/pics/hv1/127/100/1378/89630077.jpg) center top no-repeat; "><span>巨人网络代理网游大作《苍天2》 国服全球首发</span></a>
<a href="http://games.qq.com/a/20130725/011953.htm" target="_blank" id="flash5" name="#9fc6e4" style="display: none;background:url(/pics/hv1/184/79/1379/89689804.jpg) center top no-repeat; "><span>一路向西女主角现身展会现场 霸气坐台不惧走光</span></a>
<a href="http://games.qq.com/a/20130723/015566.htm" target="_blank" id="flash6" name="#53646c" style="display: none;background:url(/pics/hv1/80/13/1378/89607845.jpg) center top no-repeat; "><span>CJ首次开放试玩新游一览 轩辕剑6等八款惊艳亮相</span></a>
<div class="flash_bar">
<div class="dq" id="f1" onmouseover="changeflash(1)"><img src="/pics/hv1/23/127/1378/89636858.jpg" /></div>
<div class="no" id="f2" onmouseover="changeflash(2)"><img src="/pics/hv1/245/240/1377/89600870.jpg" /></div>
<div class="no" id="f3" onmouseover="changeflash(3)"><img src="/pics/hv1/109/77/1379/89689219.jpg" /></div>
<div class="no" id="f4" onmouseover="changeflash(4)"><img src="/pics/hv1/126/100/1378/89630076.jpg" /></div>
<div class="no" id="f5" onmouseover="changeflash(5)"><img src="/pics/hv1/185/79/1379/89689805.jpg" /></div>
<div class="no" id="f6" onmouseover="changeflash(6)"><img src="/pics/hv1/191/23/1378/89610506.jpg" /></div>
</div>
</div>
</div>
</div>
<!-- /焦点图 -->
<!--[if !IE]>|xGv00|9edf4b29681091b010bb637f7addc5fa<![endif]-->
</div><!--[if !IE]>|xGv00|e146066e0ce2105daea34728826cd9e6<![endif]-->
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var currentindex=1;
$("#flashBg").css("background-color",$("#flash1").attr("name"));
function changeflash(i) {
currentindex=i;
for (j=1;j<=6;j++){
if (j==i)
{$("#flash"+j).fadeIn("normal");
$("#flash"+j).css("display","block");
$("#f"+j).removeClass();
$("#f"+j).addClass("dq");
$("#flashBg").css("background-color",$("#flash"+j).attr("name"));
}
else
{$("#flash"+j).css("display","none");
$("#f"+j).removeClass();
$("#f"+j).addClass("no");}
}}
function startAm(){
timerID = setInterval("timer_tick()",3000);
}
function stopAm(){
clearInterval(timerID);
}
function timer_tick() {
currentindex=currentindex>=6?1:currentindex+1;
changeflash(currentindex);}
$(document).ready(function(){
$(".flash_bar div").mouseover(function(){stopAm();}).mouseout(function(){startAm();});
startAm();
});
</script>
<!-- 轮播图js结束 -->
</body>
<html>
|
