02-普通轮播图-上下滚动-小白筆記-匯編語言學習筆記

02-普通轮播图-上下滚动

2023-09-05 阅读 161 评论 0

摘要：1、结构 <div class="banner1"> <ul class="w_ul1"> <li><a href="#" target="_blank"><img src="images/tu01.jpg" width="755" height="347"></a

1、结构

2、样式

.banner1{ width:755px; height:347px; overflow:hidden; position:relative; margin:40px 0 50px 90px;}
.banner1 .w_ul1{ height:5000px;}
.banner1 .w_ul1 li{ width:755px; height:347px;}
.banner1 .h_num1{ position:absolute; right:0; bottom:10px;}
.banner1 .h_num1 li{ width: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"))

转载于:https://www.cnblogs.com/su1637/p/8178177.html

原文链接：https://hbdhgg.com/1/72.html

发表评论: