jQuery网站首页宽屏幻灯片带有弹性平滑动画切换效果

主要jquery代码$.xes.require(["slider"],function(){ var nowIndex; var textArray=[ "一周年专题页", "学而思网校推出师生互动真人秀节目", "“学而思”更名“好未来”专题页", "学而思网校，让更多人享受到优质的教学资源", "学而思培优，让学习更简单、更快乐、更有效", "智康1对1，让学习更有效" ]; var linkArray=[ "http://www.jqueryfuns.com/", "http://www.jqueryfuns.com/", "http://www.jqueryfuns.com/", "http://www.jqueryfuns.com/", "http://www.jqueryfuns.com/", "http://www.jqueryfuns.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>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(); } }); });

在线演示        积分下载        6毛下载        砍两刀下载