.slideShow{
 width:375px; 
 height:255px;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 5000px;
 position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
 float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
 width:375px; 
}
.slideShow ul li img{
 width:375px; 
 height:255px;
}
.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav i{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background:#FFF;
 margin-left: 2px;
 color: #333;
}
.slideShow .showNav .active{
  background:#0d4c7f;
  color:#FFF;
}