上古世纪jQ焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是上古世纪jQ焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=gb2312" />
    <title>腾讯上古世纪jQuery焦点图</title>
    <link href="css/archefoucs.css" rel="stylesheet" />
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/archefoucs.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div class="header">
        <div class="gg" id="gg">
            <div class="ggLoading">
                <div class="ggLoading2"><em>精彩活动载入中</em></div>
            </div>
            <div class="ggs">
                <div class="ggBox" id="ggBox">
                    <a href="#" target="_blank" title="5月22日测试开启领报名资格" style="z-index: 3; opacity: 4;">
                        <img src="images/1.jpg" alt="" /></a>
                    <a href="#" target="_blank" title="首测世界的雕琢篇章开启">
                        <img src="images/2.jpg" alt="" /></a>
                    <a href="#" target="_blank" title="上古世纪游戏资料手册">
                        <img src="images/3.jpg" alt="" /></a>
                    <a href="#" target="_blank" title="游戏四大特色揭晓">
                        <img src="images/4.jpg" alt="" /></a>
                </div>
            </div>
            <div class="ggb">
                <div class="ggBtns" id="ggBtns">
                    <a title="5月22日测试开启领报名资格" href='javascript:void(0)' class="ggOn"><em>5月22日测试开启领报名资格</em></a>
                    <a title="首测世界的雕琢篇章开启" href='javascript:void(0)'><em>首测世界的雕琢篇章开启</em></a>
                    <a title="上古世纪游戏资料手册" href='javascript:void(0)'><em>上古世纪游戏资料手册</em></a>
                    <a title="游戏四大特色揭晓" href='javascript:void(0)'><em>游戏四大特色揭晓</em></a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

JS代码(archefoucs.js):

$(function (){
	var $con = $('#gg'),$box = $con.find('#ggBox'),$btns = $con.find('#ggBtns'),i = 0,autoChange = function (){
	i += 1;
	if (i === 4){
	i = 0;
}
$btns.find('a:eq(' + i + ')').addClass('ggOn').siblings().removeClass('ggOn');
	var curr = $box.find('a:eq(' + i + ')'),prev = curr.siblings();
	prev.css('z-index',2);
	curr.css('z-index',3).animate({
	'opacity':1}
,150,function (){
	prev.css({
	'z-index':1,'opacity':0.1}
);
}
);
}
,loop = setInterval(autoChange,5000);
	$con.hover(function (){
	clearInterval(loop);
}
,function (){
	loop = setInterval(autoChange,5000);
}
);
	$btns.find('a').click(function (){
	i = $(this).index() - 1;
	autoChange();
}
);
}
);

CSS代码(archefoucs.css):

body{margin:0;padding:0;}
body{font:normal 12px 微软雅黑;}
a{text-decoration:none;}
img{border:0;}
em{font-style:normal;font-weight:normal;}
a{text-decoration:none;color:#6c6c6c;}
a:hover{color:#ff4200;}
body{min-width:1000px;padding-top:42px;background-color:#f0f0f0;color:#6c6c6c;}
.header{width:100%;max-width:1920px;margin:0 auto;position:relative;}
.ggLoading,.ggLoading2{background-image:url(../images/nav.png);}
.header{height:500px;}
.gg{width:100%;height:500px;position:relative;z-index:1;overflow:hidden;margin:0 auto;background:#d3d3d3 url(../images/loading.jpg) repeat-x;}
.ggLoading{position:absolute;left:40%;top:200px;width:325px;text-align:center;height:56px;background-position:0 -274px;background-repeat:no-repeat;line-height:56px;color:#9c9c9c;}
.ggLoading2{width:330px;height:56px;background-position:213px -330px;background-repeat:no-repeat;}
.ggLoading em{font-weight:bold;}
.ggs{width:200%;height:500px;left:-50%;top:0;position:absolute;}
.ggBox{width:1920px;height:500px;margin:0 auto;}
.ggBox a{display:block;width:1920px;height:500px;position:absolute;z-index:1;opacity:0.1;}
.ggBox img{display:block;width:1920px;height:500px;}
.ggb{position:absolute;width:100%;left:0;bottom:0;height:40px;z-index:4;background-color:#32342e;background-repeat:repeat-x;background-position:50% -40px;}
.ggBtns{width:960px;height:40px;margin:0 auto;border-left:1px solid #090908;border-right:1px solid #6a6a60;}
.ggBtns a{float:left;display:block;width:240px;height:40px;text-align:center;padding-top:10px;color:#848380;font-size:14px;line-height:40px;background-position:0 10px;position:relative;top:-10px;outline:none;background-repeat:no-repeat;cursor:pointer;}
.ggBtns a em{display:block;width:210px;height:40px;margin:0 auto;overflow:hidden;}
.ggBtns a:hover{color:#e7e7e7;}
.ggBtns a:focus{outline:none;}
.ggBtns a.ggOn{color:#e7e7e7;background-position:0 0;}
.ggb,.ggBtns a{background-image:url(../images/main.jpg);}
a.ggOn{background-image:url(../images/gg.png);}

附件:下载该文件资源,减少时间成本(增值服务)