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

基于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();                        }                    });                });            });

via:http://www.w2bc.com/Article/17218

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