029-81773686

宏 · 新闻

当前位置: 首页 > 宏 · 新闻行业视野  

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

2015.11.14

西安网站设计的小编最近老是在找一般常用的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固定背景色块,圆形就会显示成正方形的。



精彩案例