*{
  padding: 0;
  margin: 0;
}
#slideshow{
  width: 570px;  
  height: 360px;
  margin: 0 auto; /*设置在页面水平居中*/
  overflow: hidden;
  position: relative;  
}
#slideshow img{
  width: 570px;
  position: absolute; /*图片采取绝对定位，均位于左上角，重叠在一起*/
  top: 0;
  left: 0;
  opacity: 0; /*初始不透明度为0，图片都看不见*/
  transition: opacity 1s linear; /*--重点--定义一个关于透明度的transition*/
}
#slideshow img.active{
  opacity: 1; /*有active类的图片不透明度为1，即显示图片*/
}
/*-- 设置页码的样式 --*/
#slideshow div{
  width: 100%;
  position: absolute;
  bottom: 10px;
  text-align: center;
}
#slideshow span{
  float:right;
  width: 20px;
  line-height: 20px; /*当只有一行文本时height等于line-height*/
  border-radius: 20px; /*设置页码为圆形*/
  margin: 0 5px;  
  background: white;
  font-size: 10px;
}
#slideshow span.active{
  color: white;
  background: #FFDD55;
}
/*-- 设置图片描述文本的样式 --*/

#slideshow p.active{
  left: 0;
  opacity: 1;
}