JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 基于jQuery的网站首页宽屏焦点图幻灯片

基于jQuery的网站首页宽屏焦点图幻灯片

今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片。这款焦点图适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

在线预览   

基于jQuery的网站首页宽屏焦点图幻灯片2015-01-16-jquery-focus.rar

实现的代码。

html代码:

  1. <!-- index-focus begin -->
  2.         <div class="sliderWrap">
  3.             <section class="banner-TAL">
  4.         <div class="viewport">
  5.             <ul class="item" style="height: 2748px; top: 0px;">

  6.                 <li class="bn-bg01">
  7.                     <div class="wrapper"><h2 class="bn-text">科技预见学习<br></h2><img class="frame" src="images/181450_53fc5e1a05317.jpg" width="610" height="458"></div>
  8.                 </li>
  9.                 <li class="bn-bg02">
  10.                     <div class="wrapper"><h2 class="bn-text">《天降奇师》<br>大型师生户外**</h2><img class="frame" src="images/180936_54a3cb60ab15b.jpg" width="610" height="458">
  11.                     </div>
  12.                 </li>

  13.                 <li class="bn-bg03">
  14.                     <div class="wrapper"><h2 class="bn-text">磨砺十载学而思<br>共创百年好未来</h2><img class="frame" src="images/TAL06.jpg" width="610" height="458"></div>
  15.                 </li>
  16.                 <li class="bn-bg04">
  17.                     <div class="wrapper"><h2 class="bn-text">在这里 不断探索<br>教育模式的多样化</h2><img class="frame" src="images/114637_53057a9d697b2.jpg" width="610" height="458">
  18.                     </div>
  19.                 </li>
  20.                 <li class="bn-bg05">
  21.                     <div class="wrapper"><h2 class="bn-text">在这里 科技 互联网<br>与教育完美融合</h2><img class="frame" src="images/120631_53df06c769e11.jpg" width="610" height="458">
  22.                     </div>
  23.                 </li>
  24.                                 <li class="bn-bg06">
  25.                     <div class="wrapper"><h2 class="bn-text">在这里 帮助孩子<br>个性化学习与成长</h2><img class="frame" src="images/103539_532ba57bdfee0.jpg" width="610" height="458">
  26.                     </div>
  27.                 </li>

  28.             </ul>
  29.         </div>
  30.     </section>
  31.             <section class="banner-TAL">
  32.         <div class="wrapper">
  33.         <!-- focus-fixed-area -->
  34.         <div class="focus-fixed">
  35.             <!-- text-update01 -->
  36.             <div class="focus-fixed-text t-bg01" style="width: 400px; display: block;">
  37.                 <p>一周年专题页</p>
  38.             </div>

  39.             <div class="focus-logo fixpng c-bg01">
  40.                 <div class="white-bg fixpng animated"><img src="images/logo-TAL-small.png" width="80" height="80" class="fixpng"></div>
  41.             </div>
  42.         </div>
  43.         </div>
  44.         <!-- focus-right-circlet -->
  45.         <div class="focus-circlet fixpng f-bg01">
  46.         <div class="focus-nav">
  47.             <!-- focus-arrow -->
  48.             <div class="focus-arrow">
  49.                 <a class="arrow-top fixpng" href="javascript:;">向上</a>
  50.                 <a class="arrow-down fixpng" href="javascript:;">向下</a>
  51.             </div>

  52.             <!-- focus-switch -->
  53.             <ul class="focus-switch">
  54.                 <li class="fixpng selected"><a href="javascript:;">1</a></li>
  55.                 <li class="fixpng"><a href="javascript:;">2</a></li>
  56.                 <li class="fixpng"><a href="javascript:;">3</a></li>
  57.                 <li class="fixpng"><a href="javascript:;">4</a></li>
  58.                 <li class="fixpng"><a href="javascript:;">5</a></li>
  59.                 <li class="fixpng"><a href="javascript:;">6</a></li>
  60.             </ul>
  61.         </div>
  62.     </div>
  63.     </section>
  64.         </div>
复制代码css代码:
  1. $("document").ready(function () {
  2.                 $.xes.require(["slider"], function () {
  3.                     var nowIndex;
  4.                     var textArray = [
  5.              "一周年专题页",
  6.            "学而思网校推出师生互动**节目",
  7.      "“学而思”更名“好未来”专题页",
  8.                  "学而思网校,让更多人享受到优质的教学资源",
  9.          "学而思培优,让学习更简单、更快乐、更有效",
  10.                "智康1对1,让学习更有效"

  11.         ];
  12.                     var linkArray = [

  13.             "http://sc.chinaz.com/",
  14.             "http://sc.chinaz.com/",
  15.             "http://sc.chinaz.com/",
  16.             "http://sc.chinaz.com/",
  17.             "http://sc.chinaz.com/",
  18.             "http://sc.chinaz.com/"

  19.         ];
  20.                     var slider = $(".banner-TAL").slider({
  21.                         btnPrevCls: '.arrow-top',  //向前按钮样式
  22.                         btnNextCls: '.arrow-down',  //向后按钮样式
  23.                         pageCls: '.focus-switch li',  //页数按钮样式
  24.                         containerCls: '.viewport ul', //具体滑动内容元素样式
  25.                         itemCls: 'li', //滑动元素
  26.                         activeCls: 'selected', //选中样式
  27.                         perItem: 1, //显示的个数
  28.                         startIndex: 0, //开始的位置
  29.                         autoPlay: true, //是否自动播放
  30.                         duration: 5000, //自动播放时速度
  31.                         fxDuration: 1000, //滑动速度
  32.                         circle: true, //是否循环
  33.                         direction: 'vertical', //方向 horizon|vertical
  34.                         onStart: function (index) {
  35.                             $(".focus-logo").attr("class", "focus-logo fixpng");
  36.                             $(".focus-fixed-text").hide(300, function () {
  37.                                 $(this).attr("class", "focus-fixed-text");
  38.                                 $(this).attr("style", "");
  39.                                 $(this).css("width", "0px");
  40.                             });
  41.                             $(".white-bg").addClass("flipInY");
  42.                             nowIndex = index;
  43.                         },
  44.                         onEnd: function (index) {
  45.                             $(".focus-circlet").attr("class", 'focus-circlet fixpng');
  46.                             $(".focus-circlet").addClass('f-bg0' + (index + 1));
  47.                             $(".focus-logo").addClass("c-bg0" + (index + 1));
  48.                             if (navigator.userAgent.indexOf("IE") >= 0) {
  49.                                 $(".focus-fixed-text")[0].setAttribute("class", "focus-fixed-text t-bg0" + (nowIndex + 1));
  50.                                 $(".focus-fixed-text").show().attr("class", "focus-fixed-text t-bg0" + (nowIndex + 1)).animate({ width: 400 }, 800, 'easeOutBounce', function () {
  51.                                     slider.busy = false;
  52.                                 });
  53.                             }
  54.                         },
  55.                         onShow: function (index) {
  56.                             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")) {
  57.                                 //$(".white-bg").bind("webkitAnimationEnd animationend MSTransitionEnd", function(){
  58.                                 $(this).removeClass("flipInY");
  59.                                 nowIndex = index;
  60.                                 $(".focus-fixed-text").show().attr("class", "focus-fixed-text t-bg0" + (nowIndex + 1)).animate({ width: 430 }, 800, 'easeOutBounce', function () {
  61.                                 });
  62.                                 $(".focus-fixed-text p").html(textArray[nowIndex]);
  63.                                 $("#img_link").attr('href', linkArray[nowIndex]);
  64.                                 //});
  65.                             }
  66.                         } //回调
  67.                     });
  68.                     $(".white-bg").bind("webkitAnimationEnd animationend MSTransitionEnd", function () {
  69.                         $(this).removeClass("flipInY");
  70.                         slider.busy = true;
  71.                         $(".focus-fixed-text p").html(textArray[nowIndex]);
  72.                         $("#img_link").attr('href', linkArray[nowIndex]);
  73.                         $(".focus-fixed-text").show().attr("class", "focus-fixed-text t-bg0" + (nowIndex + 1)).animate({ width: 400 }, 800, 'easeOutBounce', function () {
  74.                             slider.busy = false;
  75.                         });
  76.                     });
  77.                 });
  78.                 $("nav.nav-TAL>ul>li>a").each(function () {
  79.                     var $this = $(this), index = $("nav.nav-TAL>ul>li>a.dropdown_fn").index($this);
  80.                     if ($this.is(".dropdown_fn")) {

  81.                         $this.bind("mouseover", function (e) {
  82.                             $("nav.nav-TAL>ul>li>a").removeClass("hover");
  83.                             $("nav.nav-TAL>ul>li>div:visible").hide();
  84.                             $("nav.nav-TAL>ul>li>div").eq(index).show();
  85.                         });
  86.                     } else {
  87.                         $this.bind("mouseover", function (e) {
  88.                             $("nav.nav-TAL>ul>li>a").removeClass("hover");
  89.                             $("nav.nav-TAL>ul>li>div:visible").hide();

  90.                         });
  91.                     }

  92.                 });
  93.                 $("nav.nav-TAL>ul>li>div").bind("mouseover", function () {
  94.                     var index = $("nav.nav-TAL>ul>li>div").index($(this));
  95.                     $("nav.nav-TAL>ul>li>a.dropdown_fn").eq(index).addClass("hover");
  96.                 });
  97.                 $("div.subNav-TAL").each(function (index) {
  98.                     var $this = $(this);
  99.                     $this.bind("mouseout", function (e) {
  100.                         if ($this.find("*").index($(e.relatedTarget)) <= 0) {
  101.                             $this.hide();
  102.                         }
  103.                     });
  104.                 });
  105.             });
复制代码via:http://www.w2bc.com/Article/17218

【基于jQuery的网站首页宽屏焦点图幻灯片】相关文章

1. 基于jQuery的网站首页宽屏焦点图幻灯片

2. jQuery带缩略图的宽屏焦点图插件

3. 一款基于jQuery的图片左右滑动焦点图

4. 一款基于jQuery的图片分组切换焦点图插件

5. 一款基于jQuery的支持鼠标拖拽滑动焦点图

6. jQuery/HTML5超炫全屏焦点图插件

7. jQuery宽屏时间轴焦点图插件

8. jQuery宽屏自动播放焦点图插件

9. 宽屏可左右切换的jQuery焦点图插件

10. HTML5的音频和JQUERY的全屏幻灯片

本文来源:https://www.51html5.com/a1462.html

点击展开全部

﹝基于jQuery的网站首页宽屏焦点图幻灯片﹞相关内容

「基于jQuery的网站首页宽屏焦点图幻灯片」相关专题

其它栏目

也许您还喜欢