jquery 鼠标经过效果实例

<div class="cont">
<script type="text/javascript">$(function(){
var size = $('.zjbtn li').length;
var frist = 0;
var datetime;
$('.zjbtn li').mouseover(function(){
frist = $('.zjbtn li').index(this);
showpic(frist); }).eq(0).mouseover();
$('.main4 .main4_r .cont').hover(function(){
clearInterval(datetime); },function(){
datetime = setInterval(function(){
showpic(frist)   frist++;   if(frist==size){
frist=0;
}
},3000);
}).trigger('mouseleave');
 function showpic(frist){
 var imgheight = $('.main4 .main4_r .cont').width();
 $('.zjpic').stop(true,false).animate({left:-imgheight*frist},600)  $('.zjbtn li').removeClass('hover').eq(frist).addClass('hover');
 };
 });
</script>
<div class="zjpic">
<ul>
<li><a href="#"><img src="p_w_picpaths_pd/zj1.jpg" /></a></li>
<li><a href="#"><img src="p_w_picpaths_pd/zj2.jpg" /></a></li>
<li><a href="#"><img src="p_w_picpaths_pd/zj3.jpg" /></a></li>
<li><a href="#"><img src="p_w_picpaths_pd/zj4.jpg" /></a></li> 
<li><a href="#"><img src="p_w_picpaths_pd/zj5.jpg" /></a></li>
</ul>
</div> 
<div class="zjbtn"> 
<ul>
<li class="hover"></li>
<li></li> 
<li></li> 
<li></li> 
<li></li>
</ul>
</div>
</div>