基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片。这款焦点图适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:
在线预览
基于jQuery的网站首页宽屏焦点图幻灯片2015-01-16-jquery-focus.rar
实现的代码。
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>
- $("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();
- }
- });
- });
- });
【基于jQuery的网站首页宽屏焦点图幻灯片】相关文章
本文来源:https://www.51html5.com/a1462.html
上一篇:jQuery带文字标题图片切换焦点图
下一篇:jQuery宽屏自动播放焦点图插件
﹝基于jQuery的网站首页宽屏焦点图幻灯片﹞相关内容
- HTML5的音频和JQUERY的全屏幻灯片
- 一款基于jQuery底部带缩略图的焦点图
- 一个独特的jQuery图片幻灯片插件AviaSlider
- 一个利用jQuery / CSS3技术的旋转的图像编码幻灯片
- 利用Jquery和CSS3 技术制作一副幻灯片
- Jquery实现添加3D特效到你的幻灯片
- 带幻灯片效果的全屏背景jQuery插件:Vegas2
- 推荐15款创建漂亮幻灯片的 jQuery 插件
- Jquery实现添加3D特效到你的幻灯片
- 一款基于jQuery的图片场景标注提示弹窗特效