JQuery-based website homepage wide-screen focus slides, jquery website homepage

JQuery-based website homepage wide-screen focus slides, jquery website homepage

Today, we will share a jQuery-based homepage wide-screen focus chart slide. This focus chart applies to browsers such as IE8, 360, FireFox, Chrome, Safari, Opera, aoyou, sogou, and windows of the world. As follows:

Download Online Preview source code

Implementation code.

Html code:

<! -- 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 "> 

Css code:
$ ("Document "). ready (function () {$. xes. require (["slider"], function () {var nowIndex; var textArray = ["1st anniversary topic page", "student-teacher interaction reality show ", "" Learn and think "renamed" Good Future "topic page", "Learn and think online school, so that more people can enjoy high-quality teaching resources", "Learn and think training, make learning easier, happier, and more effective "," zhikang 1-to-1, make learning more effective "]; 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 ', // forward button style btnNextCls :'. arrow-down ', // pageCls :'. focus-switch li ', // page number button style containerCls :'. viewport ul ', // The element style itemCls: 'lil' of the specific sliding content, // The activeCls: 'selected', // The selected style perItem: 1, // The number of displayed startIndex: 0, // The starting position autoPlay: true, // whether to automatically play duration: 5000, // The speed of automatic playback fxDuration: 1000, // slide speed circle: true, // whether to cycle 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 "pai.html (textArray [nowIndex]); $ (" # img_link "). attr ('href ', linkArray [nowIndex]); //}) ;}/// callback}); $ (". white-bg "). bind ("webkitAnimationEnd animationend MSTransitionEnd", function () {$ (this ). removeClass ("flipInY"); slider. busy = true; $ (". focus-fixed-text p "pai.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> "). each (function () {var $ this = $ (this), index = $ ("nav. nav-TAL> ul> li>. dropdown_fn "). index ($ this); if ($ this. is (". dropdown_fn ") {$ this. bind ("mouseover", function (e) {$ ("nav. nav-TAL> ul> li> "). 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> "). 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>. 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 ();}});});});
Via: http://www.w2bc.com/Article/17218