<!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=[
"http://sc.chinaz.com/",
"http://sc.chinaz.com/",
"http://sc.chinaz.com/",
"http://sc.chinaz.com/",
"http://sc.chinaz.com/",
"http://sc.chinaz.com/"
];
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>
基于jQuery实现的网站首页宽屏幻灯片特效源码.zip
版权申诉
124 浏览量
2022-11-10
00:25:51
上传
评论
收藏 723KB ZIP 举报
毕业_设计
- 粉丝: 1935
- 资源: 1万+
最新资源
- 封装swagger组件,提供全新UI以及无状态登录接口调用解决方案
- 小龙坎支局2024年4月渠道积分核对数据.xlam
- onlyoffice搭建及与alist使用的view.html
- Quadcopter-UAV-attitude-estimation-linux常用命令大全demo
- Quadcopter-UAV-attitude-estimation-based-on-数据库课程设计
- pbdlib-python-master.zip
- 43904245495352013_base.apk
- 基于springboot+vue + redis的工作流审批系统
- 【qt基础语法及实际案例解析】qt基础语法及实际案例解析
- 结课作业.psd
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈