jQuery实现焦点图[兼容ie7+]

HTML:

<div class="freehand" id="freehand">
            <h1>宠物手绘</h1>
            <div class="freehand_banner">
                <div class="banner_wrapper">
                    <ul class="banner_list">
                        <li class="banner_list_item1">
                            <a href="#"><span class="banner_pic banner_pic1"></span></a>
                        </li>
                        <li class="banner_list_item2">
                            <a href="#"><span class="banner_pic banner_pic2"></span></a>
                        </li>
                        <li class="banner_list_item3">
                            <a href="#"><span class="banner_pic banner_pic3"></span></a>
                        </li>
                        <li class="banner_list_item4">
                            <a href="#"><span class="banner_pic banner_pic4"></span></a>
                        </li>
                        <li class="banner_list_item5">
                            <a href="#"><span class="banner_pic banner_pic5"></span></a>
                        </li>
                    </ul>
                </div>

                <ul class="dot_list" id="dot_list">
                    <li class="dot_item1 dot_active">
                        <a class="dot dot1" href="#"></a>
                    </li>
                    <li class="dot_item2">
                        <a class="dot dot2" href="#"></a>
                    </li>
                    <li class="dot_item3">
                        <a class="dot dot3" href="#"></a>
                    </li>
                    <li class="dot_item4">
                        <a class="dot dot4" href="#"></a>
                    </li>
                    <li class="dot_item5">
                        <a class="dot dot5" href="#"></a>
                    </li>
                </ul>

            </div>
        </div>

CSS:

#main .main_l .freehand h1 {
    font-size: 16px;
    font-weight: bold;
    color: #666666;
}

#main .main_l .freehand .freehand_banner {
    margin-top: 15px;
    width: 282px;
    height: 185px;
    border: 2px solid lightblue;
    position: relative;
    overflow: hidden;
}

#main .main_l .freehand .banner_wrapper {
    position: relative;
    width: 1410px;
    height: 185px;
    background: #cccccc;
}

#main .main_l .freehand ul.banner_list .banner_pic,
#main .main_l .freehand ul.banner_list li {
    width: 282px;
    height: 185px;
    list-style: none;
    float: left;
}

#main .main_l .freehand ul.banner_list .banner_pic1 {
    background: url("../images/banner_pic1.png") no-repeat center center;
}

#main .main_l .freehand ul.banner_list .banner_pic2 {
    background: url("../images/banner_pic2.png") no-repeat center center;
}

#main .main_l .freehand ul.banner_list .banner_pic3 {
    background: url("../images/banner_pic3.png") no-repeat center center;
}

#main .main_l .freehand ul.banner_list .banner_pic4 {
    background: url("../images/banner_pic4.png") no-repeat center center;
}

#main .main_l .freehand ul.banner_list .banner_pic5 {
    background: url("../images/banner_pic5.png") no-repeat center center;
}


#main .main_l .freehand ul.dot_list {
    position: absolute;
    right: 20px;
    bottom: 15px;
    z-index: 2;
}

#main .main_l .freehand ul.dot_list li {
    list-style: none;
    float: left;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

#main .main_l .freehand ul.dot_list a.dot {
    display: block;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border: 1px solid lightblue;
    position: absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#main .main_l .freehand ul.dot_list li.dot_active a.dot {
    background: lightblue;
}

JS:

/**
     * 手绘*/
    var freehand = $('#freehand');
    var bannerWrapper = freehand.find('.banner_wrapper');
    var dotList = freehand.find('#dot_list');
    var bannerList = freehand.find('.banner_list');
    var bannerWidth = bannerList.find('li').width();
    var bannerInterval = null;

    var bannerChangeAuto = function () {
        if(bannerIndex < parseInt(dotList.find('li').size() - 1)) {
            bannerIndex++;
        }else {
            bannerIndex = 0;
        }

        dotList.find('li').eq(bannerIndex).addClass('dot_active').siblings().removeClass('dot_active');

        var bannerL = bannerWidth*bannerIndex;
        bannerWrapper.animate({'left': -bannerL + 'px'}, 500);
    };

    dotList.find('li').on('mouseover', function () {
        clearInterval(bannerInterval);

        var i = $(this).index();
        var bannerL = bannerWidth*i;
        var _this = $(this);

        bannerWrapper.animate({'left': -bannerL + 'px'}, 500);
        _this.addClass('dot_active').siblings().removeClass('dot_active');
    }).on('mouseout', function () {
        console.log($(this).index());
        //bannerInterval = setInterval(bannerChangeAuto, 3000);
        var outIndex = $(this).index();

        bannerInterval = setInterval(function () {

            if(outIndex < parseInt(dotList.find('li').size() - 1)) {
                outIndex++
            }else {
                outIndex = 0;
            }

            dotList.find('li').eq(outIndex).addClass('dot_active').siblings().removeClass('dot_active');

            var bannerL = bannerWidth*outIndex;
            bannerWrapper.animate({'left': -bannerL + 'px'}, 500);
        }, 3000);

    });

    var bannerIndex = 0;
    bannerInterval = setInterval(bannerChangeAuto, 3000);