jquery实现轮播图


          web网页上的首页,经常会出现轮播图。

          第三方的轮播图存在效果单一,扩展性低等问题。


        自定义录播图特点:

       1.功能全面

       2.可维护性高

       3.扩展性高

       4.易于兼容其他前端框架


      效果图:

       


       实现思路:

       1.布局

         通过叠罗汉方式将图片展示区、上一张下一张点击区,指示灯展示区层叠显示

         主画布wrap层在最低层,其次是图片展示区,上一张下一张点击区覆盖图片展示区,

         指示灯展示区覆盖图片展示区。

       2.CSS样式

        将wrap层相对布局,图片展示区、上一张下一张点击区、指示灯展示区层设置为绝对布局。

        wrap层作为包涵体,对图片展示区、上一张下一张点击区、指示灯展示区层进行层叠布局。

        通过display:flex设置盒子弹性布局对指示灯展示区层进行居中排列

        通过display:block和dispaly:inline-block讲行级元素转换成块级元素

       3.js

        (1)web界面渲染后,开启图片从左向右切换的定时器

  


本文转载:CSDN博客