咨询电话:
15628812133
24
2016/12

如何实现不同尺寸通屏轮播图的居中显示?

发布时间:2016-12-24 10:40:59
发布者:wenhui
浏览量:
0

 网页制作过程中少不了轮播图的使用,为了使banner图在不同分辨率的屏幕上都能通屏显示,我们会把banner图做成2000像素的宽度。

一般将banner写成如下结构:

       

  •    

  •    

为了让banner图左右居中显示,我们可以给

    加绝对定位,设置属性{ left:50%; margin-left:600px;}。600px是图片宽度的一半,如果图片宽度有变化,应对照修改数值。这种情况下,当我们应用时会发现这个方法是存在问题的,由于屏幕宽度不够,浏览器的窗口会出现横向的滚动条,这样做会导致用户体验很不好。

    那么,为了解决这种情况的发生,我们采用另一种更为合适的方法。这需要将banner写成如下结构:

              

    •    

    •    

    •    

    •    

                  

         

    利用背景图的方式将图片嵌入,通过设置背景图片居中就可以简单解决,同时需要注意的是必须给包含该背景属性的

  • 加宽高属性,否则背景图片将无法正常显示。给上述
      加以下样式属性:

      .banner{ height:490px;}

      .banner li{ height:490px; width:100%; position:absolute; top:223px;}

      .banner .ctrl{ position:absolute; top:690px; left:50%;}

      .banner .ctrl p{ width:8px; height:8px; border-radius:50%; border:1px solid black; float:left; margin-right:7px;}

      .banner .ctrl .cur{ width:10px; height:10px; border:none; background-color:#00ad3e;}

      以上样式属性的高度值、定位中的top值、控制按钮的样式等可根据实际情况自行修改。另外,我们要引入一个在线的开放的js函数库开做切换效果,引入语句如下:

      要真正实现轮播效果,还需要以下语句:

      关键词:
      返回列表