以下是 用友官网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=UTF-8">
<title>用友官网jQuery宽屏焦点图 </title>
<link href="css/shouye.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>
<div class="banner">
<div class="banner_show" id="banner_show">
<a href="#" class="bannger_inbox"><img src="images/banner6.jpg" width="2000" height="572"></a>
<a href="#" class="bannger_inbox"><img src="images/banner1.jpg" width="2000" height="572"></a>
<a href="#" class="bannger_inbox"><img src="images/banner3.jpg" width="2000" height="572"></a>
<a href="#" class="bannger_inbox"><img src="images/banner2.jpg" width="2000" height="572"></a>
<a href="#" class="bannger_inbox"><img src="images/banner5.jpg" width="2000" height="572"></a>
<div class="banner_mag">
<div class="banner_magbox">
<div id="banner_magbox0">
<h4><a href="#" target="_blank"><font color="#FFFFFF">“技术重塑管理”——2013用友用户大会</font></a></h4>
<p><a href="#" target="_blank"><font color="#FFFFFF">移动互联、云计算、大数据、社交网络等新技术，正在改变我们的世界，重塑企业的管理。“技术重塑管理”—2013用友用户大会将于9月7日在北京召开，届时将有超过3000位企业家与高管、专家与学者以及媒体代表到会。</font></a></p>
<p><a href="#" target="_blank"><img src="images/btn1.png"></a></p>
</div>
<div id="banner_magbox1" class="none">
<h4><a href="#" target="_blank"><font color="#FFFFFF">用友NC6 ——大型企业管理与电子商务平台</font></a></h4>
<p><a href="#" target="_blank"><font color="#FFFFFF">用友NC，走过16年发展历史，拥有8000余家集团企业客户。其第三代产品NC6定位于大型企业管理与电子商务平台，满足集团企业长远和现实需求，屹立于世界级高端管理软件领域。</font></a></p>
<p><a href="#" target="_blank"><img src="images/btn1.png"></a></p>
</div>
<div id="banner_magbox2" class="none">
<h4><a href="#" target="_blank"><font color="#FFFFFF">用友标准产品支持服务——专业 高效 智能</font></a></h4>
<p><a href="#" target="_blank"><font color="#FFFFFF">Standard Product Support （简称“SPS”）是用友公司原厂为确保软件产品授权许可升级和正常运行而提供的软件产品支持服务。 用友SPS，让企业管理信息系统拥有持久生命力！</font></a></p>
<p><a href="#" target="_blank"><img src="images/btn1.png"></a></p>
</div>
<div id="banner_magbox3" class="none">
<h4><a href="#" target="_blank"><font color="#FFFFFF">技术重塑管理——2013’中国大企业CIO高峰论坛</font></a></h4>
<p><a href="#" target="_blank"><font color="#FFFFFF">7月13日，珠海海湾大酒店，携手中国企业优秀CIO、业界知名信息专家，共同探讨技术如何改变行业？在新技术时代背景下，中国企业首席信息官重塑管理、重构价值、全面崛起的发展之道。</font></a></p>
<p><a href="#" target="_blank"><img src="images/btn1.png"></a></p>
</div>
<div id="banner_magbox4" class="none">
<h4><a href="#" target="_blank"><font color="#FFFFFF">技术重塑管理—用友行业信息化峰会暨样板体验会</font></a></h4>
<p><a href="#" target="_blank"><font color="#FFFFFF">行业竞争日趋激烈，商业模式千变万化，通过信息化全面推动管理创新，提升企业核心竞争力已刻不容缓。在这里，将有机会和行业龙头企业共话技术重塑管理的信息化成长之路。</font></a></p>
<p><a href="#" target="_blank"><img src="images/btn1.png"></a></p>
</div>
</div>
<div class="yq_banner_list" id="yq_banner_list">
<a href="javascript:;" rel="0" class="hover"> </a>
<a href="javascript:;" rel="1"> </a>
<a href="javascript:;" rel="2"> </a>
<a href="javascript:;" rel="3"> </a>
<a href="javascript:;" rel="4"> </a>
</div>
</div>
<div class="banner_pre_next">
<a href="javascript:;" class="banner_btn_left"><</a>
<a href="javascript:;" class="banner_btn_right">></a>
</div>
</div>
<div class="content_bottom_box">
<div class="content_bottom_tig place1">
<h4><a href="#" class="h_bg">NC6：大型企业管理与电子商务平台</a></h4>
<div class="tig_box">
<dl>
<dt><a href="#"><img src="images/pic2222.jpg" width="112" height="105"></a></dt>
<dd><a href="#">多级集团管控</a> <a href="#">全产业链协同</a> <a href="#">动态企业建模</a> <a href="#">大企业云平台</a></dd>
<div class="clear"></div>
</dl>
</div>
</div>
<div class="content_bottom_tig place2">
<h4><a href="#" class="h_bg" target="_blank">U8+：成长型企业管理与电子商务平台</a></h4>
<div class="tig_box">
<dl>
<dt><a href="#"><img src="images/pic1111.jpg" width="112" height="105"></a></dt>
<dd> <a href="#">精细管理</a> <a href="#">敏捷经营</a> <a href="#">快速应用</a> </dd>
<div class="clear"></div>
</dl>
</div>
</div>
<div class="content_bottom_tig place3" style="height: 25px;">
<h4><a href="#">UAP：统一应用平台</a></h4>
<div class="tig_box">
<dl>
<dt><a href="#"><img src="images/pic3333.jpg" width="112" height="105"></a></dt>
<dd><a href="#">开发、运行、集成一体化</a> <a href="#">实时商业分析</a> <a href="#">大数据处理</a> </dd>
<div class="clear"></div>
</dl>
</div>
</div>
<div class="content_bottom_tig place4">
<h4><a href="#" class="h_bg">用友动态</a></h4>
<div class="tig_box">
<dl>
<dt><a href="#"><img src="images/pic4444.jpg" width="112" height="105"></a></dt>
<dd><span id="RssDiv2">
<ul>
<li><a href="#" target="_blank" title="中航工业天津航空机电有限公司ERP系统上线动员会顺利召开">中航工业天津航空机..</a></li>
<li><a href="#" target="_blank" title="建材集团 NC集团管控系统项目启动会圆满召开">建材集团 NC集团..</a></li>
<li><a href="#" target="_blank" title="陕西省中小企业信息化应用培训简报——榆林站">陕西省中小企业信息..</a></li>
<li><a href="#" target="_blank" title="天津市津南区工业与经济委员会信息化培训会议圆满成功">天津市津南区工业与..</a></li>
</ul>
</span></dd>
<div class="clear"></div>
</dl>
</div>
</div>
<div class="clera"></div>
</div>
</div>
</body>
</html>JS代码(zzsc.js):
/*banner*/
$(function(){
var timer=5000;
var showtime = 800;
var showbox = $("#banner_show");
var inbox = $(".bannger_inbox");
var movelist = $("#yq_banner_list");
var s;
var b = 0;
var size =inbox.size();
var play = 1;
function move(){
b++;
if(b>size-1){
b=0;
}
inbox.each(function(e){
inbox.eq(e).hide(0);
$("#banner_magbox"+e).hide();
movelist.find("a").eq(e).removeClass("hover");
if(e == b){
inbox.eq(b).fadeIn(showtime);
$("#banner_magbox"+b).show();
movelist.find("a").eq(b).addClass("hover");
}
}
);
}
s = setInterval(move,timer);
function stopp(obj){
$(obj).hover(function(){
if(play){
clearInterval(s);
play = 0;
}
}
,function(){
if(!play){
s = setInterval(move,timer);
play = 1;
}
}
);
}
stopp(".banner_show");
$(".banner_btn_right").click(function(){
move();
}
);
$(".banner_btn_left").click(function(){
b--;
if(b<0){
b=size-1}
inbox.each(function(e){
inbox.eq(e).hide(0);
movelist.find("a").eq(e).removeClass("hover");
if(e == b){
inbox.eq(b).fadeIn(showtime);
movelist.find("a").eq(b).addClass("hover");
}
}
);
}
);
movelist.find("a").click(function(){
var rel = $(this).attr("rel");
inbox.each(function(e){
inbox.eq(e).hide(0);
movelist.find("a").eq(e).removeClass("hover");
$("#banner_magbox"+e).hide(0);
if(e == rel){
inbox.eq(rel).fadeIn(showtime);
movelist.find("a").eq(rel).addClass("hover");
$("#banner_magbox"+rel).show(0);
}
}
);
}
);
$(".bannger_inbox").each(function(e){
var inboxsize = $(".bannger_inbox").size();
inboxwimg = $(this).find("img").width();
$(".bannger_inbox").eq(e).css({
"margin-left":(-1)*inboxwimg/2+"px","z-index":inboxsize-e}
);
}
);
$(".banner").hover(function(){
$(".banner_pre_next").fadeIn();
}
,function(){
$(".banner_pre_next").fadeOut();
}
)}
);
/*menu*/
$(function(){
var tt1;
$(".content_bottom_tig").bind({
mouseenter:function(){
$(this).find(".h_bg").addClass("hover");
that = $(this)tt1= setTimeout(function(){
that.animate({
height:130}
);
}
,200);
}
,click:function(){
}
,mouseleave:function(){
$(this).find(".h_bg").removeClass("hover");
clearTimeout(tt1);
that.animate({
height:25}
);
}
}
);
}
)CSS代码(public.css):
@charset "utf-8";/*author:英雄づ小将*/
/*整站全局公用部分*/
html,body,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset,img{margin:0;padding:0;border:0;}
select,input{vertical-align:middle;font-size:12px;}
textarea{font-size:12px;}
body{background:url(/images/bggray.gif) repeat;color:#000;font-size:12px;}
ol,ul,li{list-style:none;}
.tig_box dl dd span ul li{margin-left:10px;padding-left:0px;list-style-type:disc;list-style-image:url(../images/iconlist.gif);list-style-position:outside;}
#xiangguan dl div span ul li{margin-left:10px;padding-left:0px;list-style-type:disc;list-style-image:url(../images/iconlist.gif);list-style-position:outside;}
/*{list-style:none;}
*/
img{display:block;border:0;}
div{height:auto;min-height:0}
a:link{text-decoration:none;color:#000;}
a:visited{text-decoration:none;color:#000;}
a:hover{color:#000;text-decoration:underline;}
a{blr:expression(this.onFocus=this.blur())}
/*if IE*/
a{outline:none;}
/*if 火狐等现代浏览器*/
.clear{clear:both;font-size:0;line-height:0;height:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
/* End hide from IE-mac */
.CutOver a{display:block;width:310px;white-space:nowrap;overflow:hidden;float:left;-o-text-overflow:ellipsis;/* for Opera */
text-overflow:ellipsis;/* for IE */
}
.CutOver:after{content:"...";padding-left:3px;font-size:12px;}
/* for Firefox */
.red1{color:#ec4040;}
.bgwhite{background:#fff !important;}
.space{margin:0 auto;width:970px;height:17px;background:#e7e7e7;}
.space2{height:10px;}
#banner_service{margin:0px auto 0;height:312px;background:url(../images/banner/banner_service.jpg) no-repeat center top;}
#banner_fuwu{margin:0px auto 0;height:312px;background:url(../images/banner/banner_service.jpg) no-repeat center top;}
#banner_zhibo{margin:0px auto 0;height:312px;background:url(../images/banner/banner_zhibo.jpg) no-repeat center top;}
#banner_fangan{margin:0px auto 0;height:312px;background:url(../images/banner/banner_fangan0311.jpg) no-repeat center top;}
#banner_nc{margin:0px auto 0;height:312px;background:url(../images/banner/banner_nc0311.jpg) no-repeat center top;}
#banner_u8{margin:0px auto 0;height:312px;background:url(../images/banner/banner_u80311.jpg) no-repeat center top;}
#banner_u9{margin:0px auto 0;height:312px;background:url(../images/banner/banner_u9.jpg) no-repeat center top;}
#banner_uap{margin:0px auto 0;height:312px;background:url(../images/banner/banner_uap.jpg) no-repeat center top;}
#banner_about{margin:0px auto 0;height:312px;background:url(../images/banner/banner_about.jpg) no-repeat center top;}
#banner_contact{margin:0px auto 0;height:312px;background:url(../images/banner/banner_contact.jpg) no-repeat center top;}
#banner_news{margin:0px auto 0;height:312px;background:url(../images/banner/banner_news0311.jpg) no-repeat center top;}
#banner_stock{margin:0px auto 0;height:312px;background:url(../images/banner/banner_stock.jpg) no-repeat center top;}
#banner_huoban{margin:0px auto 0;height:312px;background:url(../images/banner/banner_huoban0311.jpg) no-repeat center top;}
#banner_about{margin:0px auto 0;height:312px;background:url(../images/banner/banner_about.jpg) no-repeat center top;}
#banner_product{margin:0px auto 0;height:312px;background:url(../images/banner/banner_product0311.jpg) no-repeat center top;}
#banner_app{margin:0px auto 0;height:312px;background:url(../images/banner/app.jpg) no-repeat center top;}
/*二级页面主体内容*/
#contentbg{width:969px;background:#fff;margin:-130px auto 0px auto;}
/*其他链接&版权*/
#link{margin:0px auto 0;padding-top:18px;width:968px;}
#link dl{float:left;display:inline;margin:0 10px;padding-left:7px;border-left:1px dashed #b2b2b2;}
#link dt{margin-bottom:10px;font:12px/12px "微软雅黑","黑体";color:#353535;}
#link ul{float:left;display:inline;}
#link li{+margin-left:-16px;}
#link dd a:link,#link dd a:visited{font:12px/22px "微软雅黑","黑体";color:#a7a7a7;}
#copy{margin:20px auto 0;text-align:center;font:12px/27px "微软雅黑","黑体";color:#9a9a9a;}
#copy .link a:link,#copy .link a:visited{font:12px/27px "微软雅黑","黑体";color:#343434;}
/*相关行业解决方案*/
#xiangguan{margin:0 auto;padding:30px 0 20px 85px;width:883px;border:1px solid #d1d1d1;border-top:none;background:#fff url(../images/xiangguanbg.jpg) no-repeat 0 0;}
#xiangguan dl{float:left;display:inline;margin-right:11px;width:259px;background:url(../images/xiangguanbg2.jpg) no-repeat 0 10px;}
#xiangguan dd{margin-left:11px;padding-left:10px;background:url(../images/iconlist.gif) no-repeat left center;}
.xianguantit1 span{margin-left:13px;padding:0 5px 0 24px;font:16px/18px "微软雅黑","黑体";color:#e60012;background:#fff url(../images/xianguantit1.gif) no-repeat 4px center;}
.xianguantit2 span{margin-left:13px;padding:0 5px 0 24px;font:16px/18px "微软雅黑","黑体";color:#e60012;background:#fff url(../images/xianguantit2.gif) no-repeat 4px center;}
.xianguantit3 span{margin-left:13px;padding:0 5px 0 24px;font:16px/18px "微软雅黑","黑体";color:#e60012;background:#fff url(../images/xianguantit3.gif) no-repeat 4px center;}
#xiangguan a:link,#xiangguan a:visited{font:12px/24px "微软雅黑","黑体";color:#696969;}
.redline{height:2px;background:url(../images/redline.gif) repeat-y center center;}
.xiangguan2{background:url(../images/xiangguan2.jpg) no-repeat 0 0 !important;}
#gengduo{margin:0px auto 0;padding:19px 0 0 460px;width:510px;height:97px;background:url(../images/bggengduo.jpg) no-repeat 0 0;}
#gengduo li{float:left;display:inline;text-align:center;}
#gengduo a:link,#gengduo a:visited{display:block;padding-top:20px;width:90px;height:60px;font:14px/18px "微软雅黑","黑体";color:#e60012;background:url(../images/bgyuan.gif) no-repeat center center;}
#gengduo a:hover{text-decoration:none;color:#fff;background:url(../images/bgyuan2.gif) no-repeat center center;}
#gengduo a.padd30:link,#gengduo a.padd30:visited{padding-top:30px;height:50px;}
CSS代码(shouye.css):
/*整站全局公用部分*/
html,body,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset,img{margin:0;padding:0;border:0;}
select,input{vertical-align:middle;font-size:12px;}
textarea{font-size:12px;}
body{background:url(/images/bggray.gif) repeat;color:#000;font-size:12px;}
ol,ul,li{list-style:none;}
a:link{text-decoration:none;color:#000;}
a:visited{text-decoration:none;color:#000;}
a:hover{color:#000;text-decoration:none;}
a{blr:expression(this.onFocus=this.blur())}
/*if IE*/
a{outline:none;}
/*if 火狐等现代浏览器*/
.clear{clear:both;font-size:0;line-height:0;height:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
/* End hide from IE-mac */
.none{display:none;}
/*menu*/
.content_bottom_box{width:1003px;position:absolute;bottom:70px;left:52%;min-height:25px;z-index:99;margin-left:-502px;}
.tig_box{height:130px;background:#fff;width:240px;overflow:hidden;}
.tig_box dl{position:relative;width:240px;overflow:hidden;}
.tig_box dl dt{margin-left:0px;width:100px;height:112px;position:absolute;right:0;top:0;}
.tig_box dl dd{font-size:12px;color:#464646;padding-top:20px;padding-right:0px;padding-bottom:0px;padding-left:12px;position:relative;z-index:1;}
.tig_box dl dd p{padding:2px 0;}
.tig_box dl dd a{display:block;line-height:1.5;}
.tig_box dl dd a.index_more{text-align:right;color:#e50112;font-size:12px;}
.content_bottom_tig{width:245px;height:25px;position:absolute;overflow:hidden;font-family:"微软雅黑";}
.place1{left:0px;bottom:0px;}
.place2{left:245px;bottom:0px;}
.place3{left:490px;bottom:0px;}
.place4{left:735px;bottom:0px;}
.content_bottom_tig h4{height:25px;}
.content_bottom_tig h4 a{display:block;height:25px;line-height:25px;padding-left:6px;background:url(../images/btnbg2.png) no-repeat -248px;font-size:12px;color:#333;}
.content_bottom_tig h4 a:hover,.content_bottom_tig h4 a.hover{background:url(../images/btnbg2.png) no-repeat left;color:#fff;}
/*banner*/
.banner{min-width:1003px;height:572px;position:relative;margin:0 auto;overflow:hidden;z-index:1;}
.banner_pre_next{position:relative;z-index:101;top:230px;display:none;}
.banner_pre_next .banner_btn_left{position:absolute;left:10%;color:#fff;font:bold 80px/normal simsun;}
.banner_pre_next .banner_btn_right{position:absolute;right:10%;color:#fff;font:bold 80px/normal simsun;}
.banner_pre_next .banner_btn_right:hover,.banner_pre_next .banner_btn_left:hover{color:#C00;}
.yq_banner_list{width:200px;height:25px;position:absolute;top:125px;text-align:right;z-index:100;left:435px;padding-right:12px;}
.yq_banner_list a{display:inline-block;width:14px;height:3px;background:url(../images/abg.jpg) no-repeat left;}
.yq_banner_list a:hover,.yq_banner_list a.hover{background:url(../images/abg.jpg) no-repeat right;}
.banner_show{width:100%;text-align:center;height:572px;overflow:hidden;position:relative;}
.bannger_inbox{position:absolute;left:50%;top:0;}
.banner_mag{width:660px;height:140px;position:absolute;left:50%;top:85px;margin-left:-500px;text-align:left;z-index:99;font-family:"微软雅黑";}
.banner_magbox{width:600px;height:90px;background:url(../images/ico3.png) repeat;text-align:left;padding:25px 30px 35px;}
.banner_magbox h4{font-size:20px;*font-size:18px;font-weight:bold;color:#fff;margin-bottom:10px;}
.banner_magbox p{font-size:12px;color:#fff;font-weight:normal;margin-bottom:12px;}
分享到QQ
分享到微博
微信扫一扫
