以下是 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/fashionfoucs_lrtk.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.plugin.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 代码 开始 -->
<div id="banner">
<ul id="banner_img">
<li class="item1">
<div class="wrapper">
<div class="ad_txt">
<h2>互联网品牌传播解决方案</h2>
<p>
成都顶级品牌网站建设公司-锐狐网络！<br />
基于互联网的品牌行销策略的策划与执行。<br />
品牌形象挖掘、梳理、包装、表现与传播。<br />
辅助企业实现品牌战略目标的互联网解决方案。
</p>
<a href="#" target="_blank">了解详细></a>
</div>
<div class="ad_img">
<img src="images/20120905092323647.png" width="506" height="404" alt="互联网品牌传播解决方案" />
</div>
</div>
</li>
<li class="item2">
<div class="wrapper">
<div class="ad_txt">
<h2>Web应用(B/S)定制开发</h2>
<p>
自主研发、完善的开发框架。<br />
详细的需求调研及解决方案。<br />
实施项目经验丰富的项目团队。
</p>
<a href="#" target="_blank">了解详细></a>
</div>
<div class="ad_img">
<img src="images/20120830015430148.png" width="506" height="404" alt="Web应用(B/S)定制开发" />
</div>
</div>
</li>
<li class="item3">
<div class="wrapper">
<div class="ad_txt">
<h2>互联网时代的整合营销</h2>
<p>
基于互联网的品牌营销策略的定制与执行。<br />
品牌形象挖掘、梳理、包装、表现与传播。<br />
坐拥着最为丰富的行业经验与优势资源。
</p>
<a href="#" target="_blank">了解详细></a>
</div>
<div class="ad_img">
<img src="images/20120830015446637.png" width="506" height="404" alt="互联网时代的整合营销" />
</div>
</div>
</li>
<li class="item4">
<div class="wrapper">
<div class="ad_txt">
<h2>您的网站全职管家</h2>
<p>
成熟的监控与报警机制。<br />
丰富的整合营销的能力和经验。<br />
专业数据分析、开发和维护部门。
</p>
<a href="#" target="_blank">了解详细></a>
</div>
<div class="ad_img">
<img src="images/20120830015615324.png" width="506" height="404" alt="您的网站全职管家" />
</div>
</div>
</li>
<li class="item5">
<div class="wrapper">
<div class="ad_txt">
<h2>不可忽略的移动终端</h2>
<p>
IOS系统、Android系统应用开发。<br />
App Store、Google Play 发布。<br />
APP推广服务。
</p>
<a href="#" target="_blank">了解详细></a>
</div>
<div class="ad_img">
<img src="images/20120830015631560.png" width="506" height="404" alt="不可忽略的移动终端" />
</div>
</div>
</li>
<li class="item6">
<div class="wrapper">
<div class="ad_txt">
<h2>全新的学术会议体验</h2>
<p>
工作更高效，主办方更轻松。<br />
线上报名，让主办方不再为报名的事而费尽脑筋。<br />
线上投稿、审稿，为主办方提高收寄、审稿效率。<br />
酒店预订，会议行程更加轻松。
</p>
<a href="#" target="_blank">了解详细></a>
</div>
<div class="ad_img">
<img src="images/20120830015651273.png" width="506" height="404" alt="全新的学术会议体验" />
</div>
</div>
</li>
<li class="item7">
<div class="wrapper">
<div class="ad_txt">
<h2>医院网站管理系统(HMS)</h2>
<p>
与大型医院密切合作。<br />
诊疗挂号很轻松，检验结果实时查询，在线医患服务。<br />
便捷的数据处理能力，稳定的软件基础架构。
</p>
<a href="#" target="_blank">了解详细></a>
</div>
<div class="ad_img">
<img src="images/20120830015711808.png" width="506" height="404" alt="医院网站管理系统(HMS)" />
</div>
</div>
</li>
<li class="item8">
<div class="wrapper">
<div class="ad_txt">
<h2>智慧点亮网络(RUIFOX-LAB)</h2>
<p>
互联网改变世界，我们改变互联网。<br />
精彩前沿技术演练场。<br />
锐狐新产品尝鲜体验。
</p>
<a href="#" target="_blank">了解详细></a>
</div>
<div class="ad_img">
<img src="images/20120830015726137.png" width="506" height="404" alt="智慧点亮网络(RUIFOX-LAB)" />
</div>
</div>
</li>
</ul>
<div id="banner_ctr">
<div id="drag_ctr"></div>
<ul>
<li class="first-item">网站建设</li>
<li>品牌网站建设</li>
<li>应用系统开发</li>
<li>网络整合营销</li>
<li>网络运维托管</li>
<li>手机APP开发</li>
<li>学术会议系统</li>
<li>医院网站系统</li>
<li>实验室</li>
<li class="last-item">网站设计</li>
</ul>
<div id="drag_arrow"></div>
</div>
</div>
<script type="text/javascript" src="js/fashionfoucs.js"></script>
</body>
</html>JS代码(fashionfoucs.js):
var curIndex = 0;
var time = 800;
var slideTime = 5000;
var adTxt = $("#banner_img>li>div>.ad_txt");
var adImg = $("#banner_img>li>div>.ad_img");
var int = setInterval("autoSlide()",slideTime);
$("#banner_ctr>ul>li[class!='first-item'][class!='last-item']").click(function (){
show($(this).index("#banner_ctr>ul>li[class!='first-item'][class!='last-item']"));
window.clearInterval(int);
int = setInterval("autoSlide()",slideTime);
}
);
function autoSlide(){
curIndex + 1 >= $("#banner_img>li").size() ? curIndex = -1:false;
show(curIndex + 1);
}
function show(index){
$.easing.def = "easeOutQuad";
$("#drag_ctr,#drag_arrow").stop(false,true).animate({
left:index * 115 + 20}
,300);
$("#banner_img>li").eq(curIndex).stop(false,true).fadeOut(time);
adTxt.eq(curIndex).stop(false,true).animate({
top:"340px"}
,time);
adImg.eq(curIndex).stop(false,true).animate({
right:"120px"}
,time);
setTimeout(function (){
$("#banner_img>li").eq(index).stop(false,true).fadeIn(time);
adTxt.eq(index).children("p").css({
paddingTop:"50px",paddingBottom:"50px"}
).stop(false,true).animate({
paddingTop:"0",paddingBottom:"0"}
,time);
adTxt.eq(index).css({
top:"0",opacity:"0"}
).stop(false,true).animate({
top:"170px",opacity:"1"}
,time);
adImg.eq(index).css({
right:"-50px",opacity:"0"}
).stop(false,true).animate({
right:"10px",opacity:"1"}
,time);
}
,200) curIndex = index;
}
CSS代码(fashionfoucs_lrtk.css):
@charset "UTF-8";html{color:#000;background:#FFF;}
body,div,ul,li{margin:0;padding:0;}
img{border:0;}
li{list-style:none;}
body{font-family:Microsoft YaHei,Segoe UI,Tahoma,Arial,Verdana,sans-serif;font-size:12px;color:#666;background:#fff;}
a{color:#39f;text-decoration:none;}
a:hover{text-decoration:underline;}
.wrapper{width:986px;margin:0 auto;position:relative;}
#banner{width:100%;height:650px;background:#000;overflow:hidden;position:relative;}
#banner_img{display:block;position:relative;}
#banner_img li{position:absolute;top:0;left:0;width:100%;height:650px;background-position:center;background-size:cover;display:none;}
/*���ñ���ͼƬ-------��ʼ*/
#banner_img li.item1{background-image:url(../images/banner_bg1.jpg);display:block;}
#banner_img li.item2{background-image:url(../images/banner_bg2.jpg);}
#banner_img li.item3{background-image:url(../images/banner_bg3.jpg);}
#banner_img li.item4{background-image:url(../images/banner_bg4.jpg);}
#banner_img li.item5{background-image:url(../images/banner_bg5.jpg);}
#banner_img li.item6{background-image:url(../images/banner_bg6.jpg);}
#banner_img li.item7{background-image:url(../images/banner_bg7.jpg);}
#banner_img li.item8{background-image:url(../images/banner_bg8.jpg);}
/*���ñ���ͼƬ--------����*/
#banner_img .ad_img{position:absolute;right:10px;top:80px;width:506px;height:404px;}
#banner_img .ad_txt{position:absolute;left:10px;top:170px;color:#fff;text-shadow:1px 1px rgba(51,51,51,0.3);}
#banner_img .ad_txt h2{font:bold 36px/60px Microsoft YaHei;}
#banner_img .ad_txt a{display:block;width:100px;height:25px;line-height:25px;text-align:center;margin-top:10px;background:#fff;color:#666;text-decoration:none;text-shadow:none;}
#banner_ctr{position:absolute;width:960px;height:122px;margin-left:-480px;left:50%;bottom:40px;z-index:1;}
#banner_ctr ul{width:960px;height:122px;background:url(../images/serv_ico.png) center no-repeat;font-size:0;line-height:0;position:relative;}
#banner_ctr li{display:block;float:left;width:115px;height:122px;cursor:pointer;}
#banner_ctr li.first-item{background:#fff;width:20px;-webkit-border-radius:20px 0 0 20px;-moz-border-radius:20px 0 0 20px;border-radius:20px 0 0 20px;cursor:default;}
#banner_ctr li.last-item{background:#fff;width:20px;-webkit-border-radius:0 20px 20px 0;-moz-border-radius:0 20px 20px 0;border-radius:0 20px 20px 0;cursor:default;}
#drag_ctr{position:absolute;top:-14px;left:20px;width:115px;height:156px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;bottom:170px;background:#0084cf;}
#drag_arrow{position:absolute;top:-14px;left:20px;width:115px;height:156px;background:url(../images/drag_banner_arrow.gif) center 14px no-repeat;}
分享到QQ
分享到微博
微信扫一扫
