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

<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>

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

/**
* 手绘*/
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);