css轮播图_干货！弘成教你写轮播图全自动适应封装代码

点击蓝字

关注我们

在弘成教育任UI讲师，带了几十个班数百个学生了，我发现学生们最头疼的不是网站界面的设计，各种网站的设计，专题页，详情页，店铺装修，他们都能设计得漂漂亮亮。也不是HTML+CSS的静态代码的编写，几乎所有的静态页面他们都能写。

但是一到网站轮播图的实现方法，部分学生就晕了，觉得太难，因为它涉及javascript，这可比静态HTML代码难太多了，经常有一部分学生听到轮播图的案例部是云里雾里的，一头雾水！

对于一个UI设计师，我也不能对学生们太苛刻了，毕竟设计是他们的主打，轮播图代码能自己写当然最好，写不出来的，其实也没有关系，因为小编花了些时间，用jquery把代码封装了一下，只需要把代码复制一下，改下自己的图片放置的位置，粘贴到自己的网页，轮播图就可以动起来了，这下每个UI设计师都可以自己做轮播放图啦~

完成效果图

代码如下

无限循环翻页

       *{margin: 0;padding: 0;list-style: none;font-size: 12px;font-family:"微软雅黑";text-decoration: none;} /*清除所有浏览器自带的样式*/

       .focus{position: relative;width:799px;height: 300px;margin: auto;}

       .bigPicH{width:100%;height: 100%;position: relative;overflow: hidden}

       .bigPic{position: absolute;width:20000px;}

       .bigPic a{float: left;}

       .leftBtn,.rightBtn{cursor: pointer;width:40px;height: 50px;background: rgba(0,0,0,0.4);position: absolute;top:125px;text-align: center;color: white;line-height: 50px;font-size:15px;}

       .leftBtn{left:0px;}

       .leftBtn:hover,.rightBtn:hover{background:#464646}

       .rightBtn{right:0px;}

       .focusBtn{position: absolute;bottom:10px;text-align: center;width:100%}

       .focusBtn li{width:10px;height: 10px;background: rgba(0,0,0,0.8);border-radius: 50%;display: inline-block;margin: 0 2px}

       .focusBtn .on{background: green;}

      

             

                    

                    

                    

                    

                    

                    

                    

 

      

>

      

<

       var imgWidth = $(".bigPic a img").width()//获取图片的宽度

       var imgHeight = $(".bigPic a img").height()//获取图片的高度

       $(".focus").css({"width":imgWidth,"height":imgHeight})//设置 focus的宽高为图片的宽高

       var getBtnTop = (imgHeight-50)/2  //计算左右翻面按钮的值

       $(".leftBtn,.rightBtn").css({"top":getBtnTop})//设置左右翻面按钮的top值

       var imgNum= $(".bigPic a").length//获取图片的个数

       var numliend = imgNum-1 //序号从零开始，所以减一，得出li标签的数

       var imgNum2=imgNum; //每滚一次减一，等于零时返回原来的图片个数

       var imgWidthAll = -imgWidth*imgNum //计算滚到底的总距离

       var imgNunR = imgNum*2

       var btnOn = true; //点击按钮后的开关，防止按钮被多次点击

       var bigPicHtml = $(".bigPic").html() //获取所有的A标签和IMG内容

       $(".bigPic").append(bigPicHtml+bigPicHtml) //把所有的A和图片复制两份一份用来左滚一份用来右滚

       $(".bigPic").css({"left":imgWidthAll}) //初始化图片的位置，三份，一份放左，一份放右

       for(var forli=0;forli

              $(".focusBtn").append("") //for循环，按图片的个数插入一样多的li标签

       }

       $(".focusBtn li").eq(0).addClass("on") //第一个li标签

       function leftBtn(){ //左边的翻页按钮

              if(btnOn==true){ //判断是否可点击，防止按钮被多次点击

                     imgNum=imgNum-1

              }else{

                     return false;

              }

              btnOn = false

              var linum=$(".on").index()//获取当前元素的序号

              if(linum==0){

                     $(".focusBtn li").eq(numliend).addClass("on").siblings().removeClass("on")//让下一个li加载样式获取当前滚到哪一张

              }else{

                     $(".focusBtn li").eq(linum-1).addClass("on").siblings().removeClass("on")//每点一次向左滚一张

              }

              $(".bigPic").stop().animate({"left":-imgWidth*imgNum},function(){

                     btnOn = true

                     if(imgNum==0){ //若滚到第一张则下一张滚到最后一张

                            $(".bigPic").css({"left":imgWidthAll})

                            imgNum=imgNum2

                     }

              })

       }

       function rightBtn(){ //右边的翻页按钮

              if(btnOn==true){//判断是否可点击，防止按钮被多次点击

                     imgNum=imgNum+1

              }else{

                     return false;

              }

              btnOn = false

              var linum=$(".on").index()

              if(linum==numliend){

                     $(".focusBtn li").eq(0).addClass("on").siblings().removeClass("on")

              }else{

                     $(".focusBtn li").eq(linum+1).addClass("on").siblings().removeClass("on")

              }

              $(".bigPic").stop().animate({"left":-imgWidth*imgNum},function(){

                     btnOn = true

                     if(imgNum==imgNunR){

                            $(".bigPic").css({"left":imgWidthAll})

                            imgNum=imgNum2

                     }

              })

       }

       $(".focusBtn li").hover(function(){ //鼠标停留在切换按钮上轮播图自动滚到对应的图片上面

              var linum2=$(this).index()

              $(".bigPic").stop().animate({"left":-imgWidth*(linum2+3)})

              $(".focusBtn li").eq(linum2).addClass("on").siblings().removeClass("on")

       })

       timer=setInterval(rightBtn,3000)//每3秒自动滚一次

       $(".focus").hover(function(){  //鼠标停留在轮播图上则暂停滚动

              clearInterval(timer)

       },function(){

              timer=setInterval(rightBtn,3000)//鼠标离开后继续滚动

       })

       $(".leftBtn").click(function(){ //每点一次左滚一张

              leftBtn()

       })

       $(".rightBtn").click(function(){ //每点一次右滚一张

              rightBtn()

       })