Flexslider轮播图片，一刷新出现多张图片问题解决

   最近做前端，用Flexslider做轮播效果，是蛮方便的，但是，多张图片时，总是会出现一个问题如图：

一下子，就把两张加载出来了，然后再收缩起来，轮播，给人的视觉效果特不好。就想到，先加载第一张，后面的就延迟加载，但是做起来挺麻烦的，

但是可以通过样式控制显示效果

<style type="text/css">

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

.flexslider .slides > li:not(:first-child)

</style>

加上这两句即可。

附上flexslider 应用案例

<link rel="stylesheet" type="text/css" href="flexslider.css" /> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="jquery.flexslider-min.js"></script> 

然后在body中加入以下HTML代码：

 
<div class="flexslider"> 
      <ul class="slides"> 
        <li><img src="p_w_picpaths/s1.jpg" /></li> 
        <li><img src="p_w_picpaths/s2.jpg" /></li> 
        <li><img src="p_w_picpaths/s3.jpg" /></li> 
        <li><img src="p_w_picpaths/s4.jpg" /></li> 
      </ul> 
</div> 

转载于:https://blog.51cto.com/1008610086/1670011