以下是 云端桌面满屏焦点图代码jQuery轮播滚动切换特效 的示例演示效果:
部分效果截图:
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" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为云端桌面满屏焦点图代码(jQuery)" />
<title>云端桌面满屏焦点图代码(jQuery)</title>
<link href="css/bigfoucs.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/bigfoucs.js" type="text/javascript"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="banner">
<div class="inner">
<div class="menu">
<ul>
<li class="active">
<a href="javascript:;" class="png menu_home">
<span class="hide">云端桌面</span>
</a>
</li>
<li>
<a href="javascript:;" class="png menu_game">
<span class="hide">游戏</span>
</a>
</li>
<li>
<a href="javascript:;" class="png menu_video">
<span class="hide">视频</span>
</a>
</li>
<li>
<a href="javascript:;" class="png menu_novel">
<span class="hide">小说</span>
</a>
</li>
<li>
<a href="javascript:;" class="png menu_music">
<span class="hide">音乐</span>
</a>
</li>
<li class="btns">
<a href="#" class="png menu_download">
<span class="hide">立即下载</span>
</a>
</li>
</ul>
</div>
</div>
<div class="mask"></div>
</div>
</body>
</html>JS代码(bigfoucs.js):
$(document).ready(function (){
var animation = function (){
var p = $('div.banner');
if (p.hasClass('banner_game')){
p.fadeTo('normal',0.2,function (){
p.removeClass('banner_game');
p.addClass('banner_video');
$('div.menu > ul > li:eq(1)').removeClass('active');
$('div.menu > ul > li:eq(2)').addClass('active');
}
);
}
else if (p.hasClass('banner_video')){
p.fadeTo('normal',0.2,function (){
p.removeClass('banner_video');
p.addClass('banner_novel');
$('div.menu > ul > li:eq(2)').removeClass('active');
$('div.menu > ul > li:eq(3)').addClass('active');
}
);
}
else if (p.hasClass('banner_novel')){
p.fadeTo('normal',0.2,function (){
p.removeClass('banner_novel');
p.addClass('banner_music');
$('div.menu > ul > li:eq(3)').removeClass('active');
$('div.menu > ul > li:eq(4)').addClass('active');
}
);
}
else if (p.hasClass('banner_music')){
p.fadeTo('normal',0.2,function (){
p.removeClass('banner_music');
$('div.menu > ul > li:eq(4)').removeClass('active');
$('div.menu > ul > li:eq(0)').addClass('active');
}
);
}
else{
p.fadeTo('normal',0.2,function (){
p.addClass('banner_game');
$('div.menu > ul > li:eq(0)').removeClass('active');
$('div.menu > ul > li:eq(1)').addClass('active');
}
);
}
p.fadeTo('normal',1);
}
;
var id = setInterval(animation,10000);
var time_id = null;
$('div.menu > ul > li').click(function (){
id && clearInterval(id);
$('div.menu > ul > li').removeClass('active');
$(this).addClass('active');
var p = $('div.banner');
var a = $(this).find('a:first');
if (a.hasClass('menu_home')){
p.attr('class','banner');
}
else if (a.hasClass('menu_game')){
p.attr('class','banner banner_game');
}
else if (a.hasClass('menu_video')){
p.attr('class','banner banner_video');
}
else if (a.hasClass('menu_novel')){
p.attr('class','banner banner_novel');
}
else if (a.hasClass('menu_music')){
p.attr('class','banner banner_music');
}
time_id && clearTimeout(time_id);
time_id = setTimeout(function (){
id = setInterval(animation,10000);
}
,10000);
}
);
}
);
CSS代码(bigfoucs.css):
body,ul,li{margin:0;padding:0;}
*html body{_zoom:expression(function(x){x.style.zoom=1;try{document.execCommand('BackgroundImageCache',false,true)}
catch(e){}
}
(this));}
a{outline:none;}
.hide{display:none;}
/*-- 在这里改栏目（就是下面那一条）的背景图 ----开始*/
.png{display:inline-block;background-image:url(../images/icon.png);background-repeat:no-repeat;vertical-align:middle;width:96px;height:96px;}
.menu_home{background-position:0 0;}
.menu_game{background-position:-120px 0;}
.menu_video{background-position:-240px 0;}
.menu_novel{background-position:-360px 0;}
.menu_music{background-position:-480px 0;}
.menu_download{background-position:0 -220px;width:281px;height:70px;}
/*---- 下面这一部分是鼠标移动到栏目上后的背景图*/
.menu_home:hover,.menu .active .menu_home{background-position:0 -100px;}
.menu_game:hover,.menu .active .menu_game{background-position:-120px -100px;}
.menu_video:hover,.menu .active .menu_video{background-position:-240px -100px;}
.menu_novel:hover,.menu .active .menu_novel{background-position:-360px -100px;}
.menu_music:hover,.menu .active .menu_music{background-position:-480px -100px;}
.menu_download:hover{background-position:-300px -220px;}
/*-- 在这里改栏目（就是下面那一条）的背景图 ----结束*/
.inner{width:1000px;margin:0 auto;}
/*-- 在这一部分改焦点图 ---- 开始*/
/*---- 注意：下面这一条是第一张焦点图，改 background 属性就行，其它的不用管*/
.banner,.banner_music,.banner_game,.banner_video,.banner_novel{background:url(../images/1.jpg) no-repeat center;min-width:1000px;height:577px;position:relative;}
.banner_music{background:url(../images/2.jpg) no-repeat center;}
.banner_game{background:url(../images/3.jpg) no-repeat center;}
.banner_video{background:url(../images/4.jpg) no-repeat center;}
.banner_novel{background:url(../images/5.jpg) no-repeat center;}
/*-- 在这一部分改焦点图 ---- 结束*/
.banner .mask{display:block;width:100%;position:absolute;left:0;bottom:0;height:120px;background:#000000;opacity:0.2;filter:alpha(opacity=20);z-index:1;}
.banner .inner{display:block;width:100%;position:absolute;left:0;bottom:10px;z-index:2;text-align:center;}
.banner .menu{padding:30px 10px 0 40px;height:96px;width:950px;margin:0 auto;overflow:hidden;zoom:1;}
.banner .menu li{float:left;display:inline-block;height:96px;margin-right:20px;vertical-align:middle;}
.banner .btns{width:281px;margin:13px 0 0 55px;}
分享到QQ
分享到微博
微信扫一扫
