基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片。这款焦点图适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：
实现的代码。
html代码：
<!-- 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>
css代码：
$("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>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(); } }); }); });
