焦点图插件-06

<div class="bannerbox">
          <ul class="wwul">
               <li><a href="#" target="_blank"><img src="images/banner1.jpg" width="600" height="300"></a></li>
               <li><a href="#" target="_blank"><img src="images/banner2.jpg" width="600" height="300"></a></li>
               <li><a href="#" target="_blank"><img src="images/banner3.jpg" width="600" height="300"></a></li>
               <li><a href="#" target="_blank"><img src="images/banner4.jpg" width="600" height="300"></a></li>                                  
          </ul>
          <ol class="olbg">
            <li>1</li>
            <li class="hbg1">2</li>
            <li>3</li>
            <li>4</li>
          </ol>
</div>

 

.bannerbox{ width:600px; height:300px; overflow:hidden; position:relative; margin:50px auto;}
.bannerbox .wwul{ width:6000px;}
.bannerbox .wwul li{ float:left; width:600px;}
.bannerbox .olbg{ position:absolute; right:10px; bottom:10px;}
.bannerbox .olbg li{ width:16px; height:16px; text-align:center; line-height:16px; color:#fff; border:1px #CCCCCC solid; float:left; margin:0 10px; cursor:pointer; background:#333;}
.bannerbox .olbg .hbg1{ background:#f00; color:#FFF;}

 

$(document).ready(function(){
   function ft(li_w,wrap_1,num_h,width_1,hover_1){
                  var liw=li_w.width();
                  var repeat;
                  var index=0;
                  var length_1=li_w.length;
                  wrap_1.hover(function(){
                           clearInterval(repeat)
                  },function(){
                          repeat=setInterval(function(){
                              index++;
                              if(index==length_1)
                              { index=0};
                          ht(index)
                          },3000)
                   }).trigger("mouseout");

               num_h.mouseover(function(){
                   index=num_h.index(this);
               ht(index)
         });
 
              function ht(index){
                     width_1.stop().animate({"marginLeft":-liw*index});                  
                     num_h.eq(index).addClass(hover_1).siblings().removeClass(hover_1);
               };
       };
      ft($(".wwul li"),$(".bannerbox"),$(".olbg li"),$(".wwul"),("hbg1"));
        
    
});