<address id="jzxfj"></address>

<noframes id="jzxfj"><form id="jzxfj"><nobr id="jzxfj"></nobr></form>
<listing id="jzxfj"><listing id="jzxfj"></listing></listing>

<form id="jzxfj"><th id="jzxfj"><th id="jzxfj"></th></th></form>

<form id="jzxfj"></form>

    [科技]基于jQuery仿迅雷影音官網幻燈片特效

      分享一款基于jQuery仿迅雷影音官網幻燈片特效迅。雷影音官網jQuery幻燈片特效是一款帶左右箭頭,索引按鈕切換的jQuery幻燈片代碼。效果圖如下:

      實現的代碼。

      html代碼:

    <div class="wrapper">
            <div id="content" class="content">
                <div class="s_arr">
                    <a class="s_left png"></a><a class="s_right png"></a>
                </div>
                <div id="color_list" class="bg_colors">
                    <div class="bgs_box bgs_1">
                        <div class="wp">
                            <div class="img_area">
                                <div class="shadow png">
                                    <div class="s_img">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="footer">
                        </div>
                    </div>
                    <div class="bgs_box bgs_2">
                        <div class="wp">
                            <div class="img_area">
                                <div class="shadow png">
                                    <div class="s_img">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="footer">
                        </div>
                    </div>
                    <div class="bgs_box bgs_3">
                        <div class="wp">
                            <div class="img_area">
                                <div class="shadow png">
                                    <div class="s_img">
                                    </div>
                                </div>
                                <div class="shadow01 png">
                                    <div class="s_img01">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="footer">
                        </div>
                    </div>
                </div>
                <div class="main">
                    <div id="txt_list" class="item_txt_box">
                        <div class="item_txt item_txt_1">
                            <div class="txt_info png">
                                <strong class="hd">迅雷影音5.1</strong>
                                <h2 class="hd">
                                    精彩視界 樂無止境</h2>
                                <p class="hd">
                                    迅雷看看華麗升級版,重磅來襲!</p>
                            </div>
                            <div class="detail">
                                <ul id="v_info">
                                </ul>
                                <a href="" class="download_btn png">立即下載</a>
                                <p>
                                    想找舊版迅雷看看? <a href="#" target="_blank" class="chk_link">點擊查看 ></a></p>
                            </div>
                        </div>
                        <div class="item_txt item_txt_2">
                            <div class="txt_info png">
                                <h2 class="hd">
                                    全新片庫 為您而來</h2>
                                <p class="hd">
                                    海量資源,新鮮資訊,想看就看;<br />
                                    視頻類型清晰分類,劇集更新實時提醒。
                                </p>
                            </div>
                            <div class="detail other">
                            </div>
                        </div>
                        <div class="item_txt item_txt_3">
                            <div class="txt_info png">
                                <h2 class="hd">
                                    專業播放 盡享精彩</h2>
                                <p class="hd">
                                    百種格式,高清視頻,一點就播;<br />
                                    看片搜片窗口分離,播放記錄云端同步。
                                </p>
                            </div>
                            <div class="detail other">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="switch_box" class="switch_list">
                    <span class="on"></span><span class=""></span><span class=""></span>
                </div>
                <div class="foot_txt">
                    <script src="http://www.w2bc.com/scripts/2bc/_gg_970_90.js" type="text/javascript"></script>
                </div>
            </div>
        </div>

      js代碼:

      (function ($) {
                var initHeight = $(window).height() - 60,
            $colorList = $('#color_list').find('.bgs_box'),
            $txtList = $('#txt_list').find('.item_txt'),
            $switchList = $('#switch_box').find('span'),
            timer = null,
            key = 1;
    
                //IE6 bug
                $switchList.eq(0).addClass('on');
                $txtList.eq(0).addClass('on');
                $colorList.eq(0).addClass('on');
    
                //高度調整
                $('#content').css('min-height', initHeight + 'px')
                //視窗變化時
                $(window).resize(function () {
                    initHeight = $(window).height() - 60;
                    $('#content').css('min-height', initHeight + 'px');
                    if ($(window).height() > 866) {
                        $('#ft_area').addClass('pst_ft');
                    } else {
                        $('#ft_area').removeClass('pst_ft');
                    }
                })
                loadFinish();
                $('#switch_box').on('click', 'span', function () {
                    var stepIndex = $switchList.index($(this));
                    actFn(stepIndex);
                }).hover(function () {
                    clearInterval(timer);
                }, function () {
                    timer = setInterval(function () {
                        actFn(key);
                    }, 7000)
                })
    
                $('.s_arr').on('click', 'a', function () {
                    var step = $('.s_arr').find('a').index($(this));
                    $('#switch_box').find('span').each(function (i) {
                        var css = $(this).hasClass("on");
                        if (css) {
                            if (step == 0) {
                                if (i == 0) {
                                    step = 2
                                } else {
                                    step = i - 1;
                                }
                            } else {
                                if (i == 2) {
                                    step = 0;
                                } else {
                                    step = i + 1;
                                }
                            }
                        }
                    });
                    actFn(step);
                }).hover(function () {
                    clearInterval(timer);
                }, function () {
                    timer = setInterval(function () {
                        actFn(key);
                    }, 7000)
                })
                //底部位置調整
                if ($(window).height() > 866) {
                    $('#ft_area').addClass('pst_ft');
                } else {
                    $('#ft_area').removeClass('pst_ft');
                }
                //輪播
                function actFn(stepIndex) {
                    var stepIndex = stepIndex;
                    $switchList.eq(stepIndex).addClass('on').siblings().removeClass('on');
                    $colorList.stop().eq(stepIndex).animate({ opacity: 1 }, 800).css({ flter: "Alpha(Opacity=100)" }).siblings().animate({ opacity: 0 }, 800);
                    $txtList.eq(stepIndex).addClass('on').siblings().removeClass('on');
                    key = stepIndex;
                    $('.bgs_box').eq(key).find(".img_area").addClass('item_img_css3');
                    $('.bgs_box').eq(key).siblings().find(".img_area").removeClass('item_img_css3');
                    $('.bgs_box').eq(key).find(".footer").fadeIn(800);
                    $('.bgs_box').eq(key).siblings().find(".footer").fadeOut(800);
                    $(".item_txt").eq(key).addClass('item_txt_css3').siblings().removeClass('item_txt_css3');
                    key++;
                    if (key == $txtList.length) {
                        key = 0;
                    }
                }
                //預加載banner動畫背景圖
                function preloadImages() {
                    var arrImage = [];
                    var parLen = arguments.length;
                    var cur = 0;
                    for (var i = 0; i < parLen; i++) {
                        arrImage[i] = new Image();
                        arrImage[i].onload = function () {
                            if (cur == parLen - 1) {
                                loadFinish();
                            }
                            cur++;
                        };
                        arrImage[i].src = arguments[i];
                    }
                }
                function loadFinish() {
                    $txtList.eq(0).addClass('item_txt_css3');
                    $colorList.eq(0).find(".img_area").addClass('item_img_css3');
                    //自動輪播
                    timer = setInterval(function () {
                        actFn(key);
                    }, 7000);
                }
            })(jQuery)

    闺蜜男友又大又粗又黑
    <address id="jzxfj"></address>

    <noframes id="jzxfj"><form id="jzxfj"><nobr id="jzxfj"></nobr></form>
    <listing id="jzxfj"><listing id="jzxfj"></listing></listing>

    <form id="jzxfj"><th id="jzxfj"><th id="jzxfj"></th></th></form>

    <form id="jzxfj"></form>