以下是 jQuery网站首页宽屏幻灯片特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>jQuery网站首页宽屏幻灯片代码</title>
<link href="css/base.css" type="text/css" rel="stylesheet">
<link href="css/main.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.easing.compatibility.js"></script>
<body>
<!-- index-focus begin -->
<div class="sliderWrap">
<section class="banner-TAL">
<div class="viewport">
<ul class="item" style="height: 2748px; top: 0px;">
<li class="bn-bg01">
<div class="wrapper"><h2 class="bn-text">科技预见学习<br></h2><img class="frame" src="images/181450_53fc5e1a05317.jpg" width="610" height="458"></div>
</li>
<li class="bn-bg02">
<div class="wrapper"><h2 class="bn-text">《天降奇师》<br>大型师生户外真人秀</h2><img class="frame" src="images/180936_54a3cb60ab15b.jpg" width="610" height="458">
</div>
</li>
<li class="bn-bg03">
<div class="wrapper"><h2 class="bn-text">磨砺十载学而思<br>共创百年好未来</h2><img class="frame" src="images/TAL06.jpg" width="610" height="458"></div>
</li>
<li class="bn-bg04">
<div class="wrapper"><h2 class="bn-text">在这里 不断探索<br>教育模式的多样化</h2><img class="frame" src="images/114637_53057a9d697b2.jpg" width="610" height="458">
</div>
</li>
<li class="bn-bg05">
<div class="wrapper"><h2 class="bn-text">在这里 科技 互联网<br>与教育完美融合</h2><img class="frame" src="images/120631_53df06c769e11.jpg" width="610" height="458">
</div>
</li>
<li class="bn-bg06">
<div class="wrapper"><h2 class="bn-text">在这里 帮助孩子<br>个性化学习与成长</h2><img class="frame" src="images/103539_532ba57bdfee0.jpg" width="610" height="458">
</div>
</li>
</ul>
</div>
</section>
<section class="banner-TAL">
<div class="wrapper">
<!-- focus-fixed-area -->
<div class="focus-fixed">
<!-- text-update01 -->
<div class="focus-fixed-text t-bg01" style="width: 400px; display: block;">
<p>一周年专题页</p>
</div>
<div class="focus-logo fixpng c-bg01">
<div class="white-bg fixpng animated"><img src="images/logo-TAL-small.png" width="80" height="80" class="fixpng"></div>
</div>
</div>
</div>
<!-- focus-right-circlet -->
<div class="focus-circlet fixpng f-bg01">
<div class="focus-nav">
<!-- focus-arrow -->
<div class="focus-arrow">
<a class="arrow-top fixpng" href="javascript:;">向上</a>
<a class="arrow-down fixpng" href="javascript:;">向下</a>
</div>
<!-- focus-switch -->
<ul class="focus-switch">
<li class="fixpng selected"><a href="javascript:;">1</a></li>
<li class="fixpng"><a href="javascript:;">2</a></li>
<li class="fixpng"><a href="javascript:;">3</a></li>
<li class="fixpng"><a href="javascript:;">4</a></li>
<li class="fixpng"><a href="javascript:;">5</a></li>
<li class="fixpng"><a href="javascript:;">6</a></li>
</ul>
</div>
</div>
</section>
</div>
<!-- index-focus end -->
<script type="text/javascript" src="js/xes.core.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$.xes.require(["slider"],function(){
var nowIndex;
var textArray=[
"一周年专题页",
"学而思网校推出师生互动真人秀节目",
"“学而思”更名“好未来”专题页",
"学而思网校，让更多人享受到优质的教学资源",
"学而思培优，让学习更简单、更快乐、更有效",
"智康1对1，让学习更有效"
];
var linkArray=[
"#",
"#",
"#",
"#",
"#",
"#"
];
var slider=$(".banner-TAL").slider({
btnPrevCls: '.arrow-top', //向前按钮样式
btnNextCls: '.arrow-down', //向后按钮样式
pageCls: '.focus-switch li', //页数按钮样式
containerCls: '.viewport ul',//具体滑动内容元素样式
itemCls: 'li',//滑动元素
activeCls: 'selected',//选中样式
perItem: 1,//显示的个数
startIndex: 0,//开始的位置
autoPlay: true,//是否自动播放
duration: 5000,//自动播放时速度
fxDuration: 1000,//滑动速度
circle: true,//是否循环
direction: 'vertical',//方向 horizon|vertical
onStart:function(index){
$(".focus-logo").attr("class","focus-logo fixpng");
$(".focus-fixed-text").hide(300,function(){
$(this).attr("class","focus-fixed-text");
$(this).attr("style","");
$(this).css("width","0px");
});
$(".white-bg").addClass("flipInY");
nowIndex=index;
},
onEnd:function(index){
$(".focus-circlet").attr("class",'focus-circlet fixpng');
$(".focus-circlet").addClass('f-bg0'+(index+1));
$(".focus-logo").addClass("c-bg0"+(index+1));
if(navigator.userAgent.indexOf("IE")>=0){
$(".focus-fixed-text")[0].setAttribute("class","focus-fixed-text t-bg0"+(nowIndex+1));
$(".focus-fixed-text").show().attr("class","focus-fixed-text t-bg0"+(nowIndex+1)).animate({width:400},800,'easeOutBounce',function(){
slider.busy=false;
});
}
},
onShow: function(index){
if(navigator.userAgent.indexOf("MSIE 6.0") || navigator.userAgent.indexOf("MSIE 7.0") || navigator.userAgent.indexOf("MSIE 8.0") || navigator.userAgent.indexOf("MSIE 9.0")) {
//$(".white-bg").bind("webkitAnimationEnd animationend MSTransitionEnd", function(){
$(this).removeClass("flipInY");
nowIndex = index;
$(".focus-fixed-text").show().attr("class", "focus-fixed-text t-bg0"+(nowIndex+1)).animate({width:430},800,'easeOutBounce',function(){
});
$(".focus-fixed-text p").html(textArray[nowIndex]);
$("#img_link").attr('href', linkArray[nowIndex]);
//});
}
} //回调
});
$(".white-bg").bind("webkitAnimationEnd animationend MSTransitionEnd",function(){
$(this).removeClass("flipInY");
slider.busy =true;
$(".focus-fixed-text p").html(textArray[nowIndex]);
$("#img_link").attr('href', linkArray[nowIndex]);
$(".focus-fixed-text").show().attr("class","focus-fixed-text t-bg0"+(nowIndex+1)).animate({width:400},800,'easeOutBounce',function(){
slider.busy=false;
});
});
});
$("nav.nav-TAL>ul>li>a").each(function(){
var $this=$(this),index=$("nav.nav-TAL>ul>li>a.dropdown_fn").index($this);
if($this.is(".dropdown_fn")){
$this.bind("mouseover",function(e){
$("nav.nav-TAL>ul>li>a").removeClass("hover");
$("nav.nav-TAL>ul>li>div:visible").hide();
$("nav.nav-TAL>ul>li>div").eq(index).show();
});
}else{
$this.bind("mouseover",function(e){
$("nav.nav-TAL>ul>li>a").removeClass("hover");
$("nav.nav-TAL>ul>li>div:visible").hide();
});
}
});
$("nav.nav-TAL>ul>li>div").bind("mouseover",function(){
var index= $("nav.nav-TAL>ul>li>div").index($(this));
$("nav.nav-TAL>ul>li>a.dropdown_fn").eq(index).addClass("hover");
});
$("div.subNav-TAL").each(function(index){
var $this=$(this);
$this.bind("mouseout",function(e){
if($this.find("*").index($(e.relatedTarget))<=0){
$this.hide();
}
});
});
});
</script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
</body>
</html>
JS代码(xes.core.js):
(function($){
$.xes={
}
;
$.xes.template=function(){
var templateScript=$("script[xesType=temp]");
var templates={
}
;
for(var i=0,l=templateScript.length;
i<l;
i+=1){
templates[$(templateScript[i]).attr("forObj")]=$(templateScript[i]).html().trim();
}
return templates;
}
;
$.xes.require=function(names,fun){
var head=document.getElementsByTagName("head")[0];
var script=null;
var scripts=[];
var name;
var total=0;
var num=0;
if(typeof names ==="string"){
name= names;
script=document.createElement("script");
script.type="text/javascript";
head.appendChild(script);
script.onload=function(){
fun();
}
;
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
fun();
}
}
;
}
else if(typeof names ==="object"){
total=names.length;
for(var i= 0;
i<total;
i+=1){
scripts[i]=document.createElement("script");
scripts[i].type="text/javascript";
scripts[i].src = "http://pic.speiyou.com/haoweilai/js/xes."+names[i]+".js";
head.appendChild(scripts[i]);
scripts[i].onload=function(){
num+=1;
if(num===total){
fun();
}
}
;
scripts[i].onreadystatechange=(function(index){
var _i=index;
return function(){
if (scripts[_i].readyState == "loaded" || scripts[_i].readyState == "complete"){
scripts[_i].onreadystatechange = null;
num+=1;
if(num===total){
fun();
}
}
}
;
}
)(i);
}
}
}
;
$.xes.rePosDialog=function(pop){
var pos= $.xes.getDialogPosition(pop);
pop.css("top",pos.top+"px");
pop.css("left",pos.left+"px");
}
;
$.xes.getDialogPosition=function(pop){
var width=$(window).width();
var height=$(window).height();
var boundingClientRect=pop[0].getBoundingClientRect();
var scrollTop= document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
var scrollLeft= document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
var popWidth=boundingClientRect.right-boundingClientRect.left;
var popHeight=boundingClientRect.bottom-boundingClientRect.top;
return{
left:(width-popWidth)/2+scrollLeft,top:(height-popHeight)/2+scrollTop}
;
}
;
}
)(jQuery);
CSS代码(base.css):
body,html{background:#FFF;color:#666;}
body,button,input,select,textarea{font:12px ����,tahoma,arial;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;margin:0;padding:0;font-family:"����","tahoma","arial",;}
header,footer,nav,section,article,aside,dialog,figure,menu{display:block}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
ol,ul{list-style:none;}
a{color:#666;text-decoration:none;}
a:hover{color:#116ec1;text-decoration:underline;}
.fn-clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.fn-clear{zoom:1;/* for IE6 IE7 */
}
.fn-left,.fn-right{display:inline;}
.fn-left{float:left;}
.fn-right{float:right;}
.relative{position:relative;}
/*------------------------------------------------------------------���ÿ����ʽ------------------------------------------------------------------*/
.wrapper{width:960px;margin:0 auto;}
CSS代码(main.css):
/*TAL banner*/
.banner-TAL{position:absolute;width:100%;height:458px;overflow:hidden;z-index:9;}
/*TAL banner-bg*/
.bn-bg01,.bn-bg02,.bn-bg03,.bn-bg04,.bn-bg05,.bn-bg06{height:458px;}
.bn-text{position:absolute;top:150px;line-height:50px;font-size:30px;font-weight:100;color:#FFF;letter-spacing:2px;text-shadow:0 2px 1px rgba(0,0,0,0.2);}
/*TAL banner focus-circlet*/
.f-bg01,.f-bg02,.f-bg03,.f-bg04,.f-bg05,.f-bg06,.focus-arrow a,.focus-switch li{background:url(../images/TAL-script01.png) no-repeat;}
.focus-circlet{position:absolute;top:0;right:0;height:240px;width:45px;padding:120px 0;z-index:99;}
.f-bg01{background-position:-155px -216px;}
.f-bg02{background-position:-155px -191px;}
.f-bg03{background-position:-155px -165px;}
.f-bg04{background-position:-155px -139px;}
.f-bg05{background-position:-155px -113px;}
.f-bg06{background-position:-155px -87px;}
.focus-nav{position:relative;height:240px;}
.focus-arrow{position:absolute;top:0;left:10px;height:240px;}
.focus-arrow a{position:absolute;display:block;width:25px;height:15px;text-indent:-999px;overflow:hidden;}
.focus-arrow a.arrow-top{top:0;background-position:-40px 0;}
.focus-arrow a.arrow-down{bottom:0;background-position:-70px 0;}
.focus-switch{position:absolute;top:40px;left:14px;width:18px;}
.focus-switch li{margin:8px auto;width:18px;height:18px;background-position:0 -18px;}
.focus-switch li.selected{background-position:0 0;}
.focus-switch li a{display:block;width:18px;height:18px;text-indent:-999px;overflow:hidden;}
/*TAL banner focus-fixed-area*/
.focus-fixed-area{position:relative;width:960px;height:103px;margin:-150px auto 0 auto;z-index:50;}
.focus-fixed{position:absolute;top:0;left:295px;width:540px;height:103px;}
.focus-fixed-text{position:absolute;top:332px;left:55px;width:430px;height:20px;padding:20px 0;font-size:16px;color:#FFF;line-height:20px;border-radius:3px;z-index:59;overflow:hidden;}
.focus-fixed-text p{width:430px;margin-left:75px;}
:root .focus-fixed-text{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#00000000',EndColorStr='#00000000')9}
.focus-logo{position:absolute;top:311px;width:80px;height:80px;padding:11px 12px 12px 11px;z-index:60;}
.c-bg01,.c-bg02,.c-bg03,.c-bg04,.c-bg05,.c-bg06,.white-bg{background:url(../images/TAL-script01.png) no-repeat;}
.white-bg{position:relative;background-position:0 -40px;}
/*Index:TAL-brand*/
.TAL-brand,.TAL-brand ul li a:hover{background:url(../images/TAL-script02.png) no-repeat;}
.TAL-brand{height:60px;width:100%;overflow:hidden;background-position:0 -300px;background-repeat:repeat-x;}
.TAL-brand h2{display:inline;float:left;margin-left:10px;color:#333;font-size:14px;font-weight:normal;padding-top:20px;}
.TAL-brand ul{float:right;margin-top:2px;height:58px;}
.TAL-brand ul li{float:left;}
.TAL-brand ul li a{display:inline-block;padding:20px 30px;line-height:18px;}
.TAL-brand ul li a:hover{color:#f08d00;text-decoration:none;padding:19px 31px 20px;border:1px solid #e8e8e8;border-bottom:0;background-position:0 -370px;}
.viewport{width:100%;height:100%;overflow:hidden;position:relative;}
ul.item{position:absolute;width:100%;font-size:0;}
ul.item li{vertical-align:bottom;}
/*ie7 li �հ�*/
.wrapper{position:relative;}
.wrapper img.frame{position:absolute;left:350px;}
.animated{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;-o-animation:1s ease;animation:1s ease;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:0;}
40%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0.2;}
70%{-webkit-transform:perspective(400px) rotateY(150deg);opacity:0.7;}
100%{-webkit-transform:perspective(400px) rotateY(180deg);opacity:1;}
}
@-moz-keyframes flipInY{0%{-moz-transform:perspective(400px) rotateY(0deg);opacity:0;}
40%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0.2;}
70%{-moz-transform:perspective(400px) rotateY(150deg);opacity:0.7;}
100%{-moz-transform:perspective(400px) rotateY(180deg);opacity:1;}
}
@-ms-keyframes flipInY{0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-ms-transform:perspective(400px) rotateY(-10deg);}
70%{-ms-transform:perspective(400px) rotateY(10deg);}
100%{-ms-transform:perspective(400px) rotateY(0deg);opacity:1;}
}
@-o-keyframes flipInY{0%{-o-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-o-transform:perspective(400px) rotateY(-10deg);}
70%{-o-transform:perspective(400px) rotateY(10deg);}
100%{-o-transform:perspective(400px) rotateY(0deg);opacity:1;}
}
@keyframes flipInY{0%{transform:perspective(4000px) rotateY(90deg);opacity:0;}
40%{transform:perspective(4000px) rotateY(0deg);}
70%{transform:perspective(4000px) rotateY(-90deg);}
100%{transform:perspective(4000px) rotateY(-180deg);opacity:1;}
}
.flipInY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInY;-moz-backface-visibility:visible !important;-moz-animation-name:flipInY;-ms-backface-visibility:visible !important;-ms-animation-name:flipInY;-o-backface-visibility:visible !important;-o-animation-name:flipInY;backface-visibility:visible !important;animation-name:flipInY;transition-duration:100ms;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;}
.sliderWrap{position:relative;margin-top:-5px;height:458px;}
/*�����������*/
.t-bg01{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#CCb7264d',EndColorStr='#CCb7264d');/*for IE*/
background-color:rgba(183,38,77,0.8);/*for FF*/
}
.t-bg02{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#CCf68a0e',EndColorStr='#CCf68a0e');/*for IE*/
background-color:rgba(246,138,14,0.8);/*for FF*/
}
.t-bg03{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#CC2390c3',EndColorStr='#CC2390c3');/*for IE*/
background-color:rgba(35,144,195,0.8);/*for FF*/
}
.t-bg04{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#CCd49419',EndColorStr='#CCd49419');/*for IE*/
background-color:rgba(212,148,25,0.8);/*for FF*/
}
.t-bg05{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#CC2390c3',EndColorStr='#CC2390c3');/*for IE*/
background-color:rgba(35,144,195,0.8);/*for FF*/
}
.t-bg06{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#CC359156',EndColorStr='#CC359156');/*for IE*/
background-color:rgba(53,145,86,0.8);/*for FF*/
}
/*�ֲ�ͼ��*/
.bn-bg01{background:url(../images/bannerBg03.png) top center no-repeat #e52e5f;}
.bn-bg02{background:url(../images/bannerBg05.png) top center no-repeat #f38701;}
.bn-bg03{background:url(../images/bannerBg01.png) top center no-repeat #016dad;}
.bn-bg04{background:url(../images/bannerBg02.png) top center no-repeat #f5bd4c;}
.bn-bg05{background:url(../images/bannerBg01.png) top center no-repeat #016dad;}
.bn-bg06{background:url(../images/bannerBg04.png) top center no-repeat #008053;}
/*logoȦ�ı���*/
.c-bg01{background-position:0 -370px;}
.c-bg02{background-position:0 -590px;}
.c-bg03{background-position:0 -150px;}
.c-bg04{background-position:0 -260px;}
.c-bg05{background-position:0 -150px;}
.c-bg06{background-position:0 -480px;}
分享到QQ
分享到微博
微信扫一扫
