.roll-wrap:hover .control{
  display: block;
}

.roll-wrap{
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
  margin: 20px 0;
}
.roll-wrap .roll__list{

}
.roll_row .roll__list::before, .roll_row .roll__list::after {
  content: "";
  display: table;
  line-height: 0;
}
.roll_row .roll__list::after {
  clear: both;
}
.roll_row .roll__list{
  width: 9999px;
}
.roll_row .roll__list li{
  float: left;
  display: block;
  margin-right: 20px;
  width: 230px;
  height: 31px;
  line-height: 230px;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  color: #fff;
  background-color: #ff9900;
}
.control{
  position: absolute;
  top: 30px;
  display: none;
  padding: 10px 5px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background-color: rgba(0, 0, 0, .3);
}
.control:hover{
  background-color: rgba(0, 0, 0, .5);
}
.control.pre{
  left: 5px;
}
.control.next{
  right: 5px;
}
.roll_col{
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.roll_col .roll__list{
  width: 100%;
}
.h600{
  height: 600px;
}
.roll_col li{
  display: block;
  height: 200px;
  line-height: 200px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: #ff9900;
}
.roll_col .li-2{
  background-color: #0099ff;
}
.roll_col .li-3{
  background-color: #ff0099;
}
.roll_col .li-4{
  background-color: #00ff99;
}
.roll_col .control{
  top: 80px;
}