基于jQuery仿迅雷影音官网幻灯片特效

浏览数：42 / 时间：2015年06月09日

分享一款基于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)