移动端实现文字轮播_案例：移动端轮播图详解

html

 <div class="focus">  
 <ul>  
 <li><img src="upload/focus3.jpg" alt=""></li>  戴帽子 
 <li><img src="upload/focus1.jpg" alt=""></li>  
 <li><img src="upload/focus2.jpg" alt=""></li>  
 <li><img src="upload/focus3.jpg" alt=""></li>  
 <li><img src="upload/focus1.jpg" alt=""></li>  穿鞋 
 </ul>  
 <ol>  
 <li class="current"></li>  
 <li></li>  
 <li></li>  
 </ol>  
 </div> 

css

.focus {
      
 position: relative; /* 父相 */ 
 padding-top: 44px; 
 overflow: hidden; /* 溢出隐藏 */ 
}  
.focus img {
      
 width: 100%; /* 图片与子盒子等宽 */ 
}  
.focus ul {
      
 overflow: hidden; /* ul没有高度，li浮动了，所以要清除浮动 */ 
 width: 500%; /* 父盒子是页面的五倍宽 */ 
 margin-left: -100%; /* 看脸 不要漏出帽子 */ 
}  
.focus ul li {
     
 float: left; 
 width: 20%; /* 子盒子浮动起来 子盒子是父盒子的0.2倍宽*/ 
}  
.focus ol {
      
 position: absolute; /* 子绝 */ 
 bottom: 5px; 
 right: 5px; 
 margin: 0; /* 清除ol的默认外边距 */ 
}  
.focus ol li {
     
 display: inline-block; /* 放一行上 */ 
 width: 5px; 
 height: 5px; 
 background-color: #fff; 
 list-style: none; /* 去掉样式 */ 
 border-radius: 2px; 
 transition: all .3s; /* 小圆点慢慢变化 */  
}  
.focus ol li.current {
     /* 当前圆点