普通轮播图上下滚动-04

1、结构

                <div class="banner1">
                        <ul class="w_ul1">
                             <li><a href="#" target="_blank"><img src="images/tu01.jpg" width="755" height="347"></a></li>
                             <li><a href="#" target="_blank"><img src="images/tu02.jpg" width="755" height="347"></a></li>
                             <li><a href="#" target="_blank"><img src="images/tu01.jpg" width="755" height="347"></a></li>
                             <li><a href="#" target="_blank"><img src="images/tu02.jpg" width="755" height="347"></a></li>
                        </ul>
                        <ol class="h_num1">
                            <li class="hover11"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ol>
                 </div>

2、样式

.banner1{ 755px; height:347px; overflow:hidden; position:relative; margin:40px 0 50px 90px;}
.banner1 .w_ul1{ height:5000px;}
.banner1 .w_ul1 li{ 755px; height:347px;}
.banner1 .h_num1{ position:absolute; right:0; bottom:10px;}
.banner1 .h_num1 li{ 50px; height:6px; background:#960; float:left; margin:0 4px; cursor:pointer;}
.banner1 .h_num1 .hover11{ background:#FFEB00;}

3、效果

    /*-----------上下轮播----------*/
    
    function ft_1(li_h,wrap_1,num_h,width_1,hover_1){
                  var lih=li_h.height();
                  var repeat;
                  var index=0;
                  var length_1=li_h.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({"marginTop":-lih*index});                  
                     num_h.eq(index).addClass(hover_1).siblings().removeClass(hover_1);
               };
       };
      ft_1($(".w_ul1 li"),$(".banner1"),$(".h_num1 li"),$(".w_ul1"),("hover11"))