jQuery实现一个简单的轮播图

前端之家收集整理的这篇文章主要介绍了jQuery实现一个简单的轮播图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

HTML代码

轮播图练习 nofollow" type="text/css"/>
      
  •   
  •   
  •   
  •   
      
  •   
  •   
  •   
  •   
     

css代码

Box-sizing:border-Box; display: inline-block;} .point li.active{background: #fff;} .btn{ position: relative;} .btn span{ display: inline-block; vertical-align: top; width: 100px; height: 100px; background: rgba(0,.5); position: absolute; top:-235px; cursor: pointer;} .btn .prev{left: 0} .btn .next{ right: 0;}

js代码

上一页,e是下一页     index=0;     len=$(a).length-1;     function teb(index){       $(c).eq(index).addClass(b).siblings('').removeClass(b);       $(a).eq(index).fadeIn(300).addClass('curr').siblings('').fadeOut(300).removeClass('curr');     };     $(c).click(function(){       index=$(this).index();       teb(index);     });     $(d).click(function(){       index--;       if(index<0){         index=len;       };       teb(index);     });     $(e).click(function(){       index++;       if(index>len){         index=0;       };       teb(index);     });     function timeRun(){       time=setInterval(function(){         index++;         if(index>len){           index=0;         };         teb(index);       },3000);     };     timeRun();   };   banner('.back>li','active','.point>li','.prev','.next'); });

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/jquery/41511.html

猜你在找的jQuery相关文章