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:;
 }

 #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);