宏博网络 | 专注互联网品牌一站式服务

Thank you for visiting

029-81773686

全网开发&整合营销服务商

CopyRight
©HOOBOO All rights reserved

全网开发&整合营销服务商

029-81773686

常用的焦点图大图轮播效果

2019.11.25

西安网站设计的小编最近老是在找一般常用的banner图特效,需要都会来找到我这里找,要求换一个兼容性比较好的插件,今天整理一下最近常用的大图效果:

TM截图未命名.jpg

上面是js要调用的,大家没事可以下载下来;


         

             

                     

  •                  

  •                  

  •              

         

上面的是真正在php里面的代码,当然你要循环出来吧!


#full-screen-slider { width:100%; height:570px; float:left; position:relative;background:#f1f1f1; }

#slides { display:block; width:100%; height:570px; list-style:none; padding:0; margin:0; position:relative}

#slides li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute;z-index:10;}

#slides li a { display:block; width:100%; height:100%; text-indent:-9999px}

上面这些代码常要该的就是高度height:****

#pagination { display:block; list-style:none; position:absolute; left:19.3%; top:527px; z-index:1000000000;  padding:5px 15px 5px 0; margin:0}

这个也是要改的小点点距离顶端的距离,一般只要不太过都是会居中的。

#pagination li a { display:block; width:100%; height:100%; padding:0; margin:0;  text-indent:-9999px;width:10px; height:10px;}

#pagination li.current { background:#0092CE}*/

#pagination li { display:block; list-style:none; width:11px; height:11px; float:left; margin-left:15px; background:url(../images/pagination.png) no-repeat}

#pagination li a { display:block; width:100%; height:100%; padding:0; margin:0;  text-indent:-9999px;width:7px; height:7px;}

#pagination li.current { background:url(../images/pagination2.png) no-repeat}


上面最长该的就是宽度大小及背景图片,还好我做成了图片,如果用css固定背景色块,圆形就会显示成正方形的。



上一篇:如果世界上没有广告,人类的生活将是怎样?

下一篇:如何实现多行文字垂直居中?

CopyRight © HOOBOO   备案号:陕ICP备10007014号-9   站点地图 免责声明:本网站部分资源来源于网络,如有侵权,请联系我们告知删除,我们将会尽快处理,谢谢!本站不承担任何法律责任。