网站地图    收藏   

主页 > 前端 > javascript >

QQ游戏频道大屏轮播焦点广告代码

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 今天发现QQ游戏频道有一款非常不错的大屏轮播焦点广告,心情来潮就直接把这代码给拿下来了,下面与各位同学分享一下。...

代码如下

 代码如下 复制代码

<!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>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论