尝试一下，仅作记录。
<!DOCTYPE html>
<html>
<head>
<style>
*{transition:all 1s ease 0s;}
#showSlide{300px;height:200px;overflow:hidden; border:20px solid #ccc;box-shadow:1px 1px 3px rgba(0,0,0,1); }
#inner{}
.slide{300px;height:200px;display:inline-block;}
label{border-radius: 5px;display: inline-block; 10px;height: 10px;background: #ccc;cursor:pointer;}
input{display:none}
#slide1:hover ~ #showSlide #inner{margin-top:0;}
#slide2:hover ~ #showSlide #inner{margin-top:-200px;}
#slide3:hover ~ #showSlide #inner{margin-top:-400px;}
#slide4:hover ~ #showSlide #inner{margin-top:-600px;}
label:hover{background:#000;}
</style>
</head>
<body>
<input checked="checked" name="slider" id="slide1" type="radio">
<input name="slider" id="slide2" type="radio">
<input name="slider" id="slide3" type="radio">
<input name="slider" id="slide4" type="radio">
<input name="slider" id="slide5" type="radio">
<div id="showSlide">
<div id="inner">
<artical>
<div class="slide"><img src="images/slide1.jpg"></div>
</artical>
<artical>
<div class="slide"><img src="images/slide2.jpg"></div>
</artical>
<artical>
<div class="slide"><img src="images/slide3.jpg"></div>
</artical>
<artical>
<div class="slide"><img src="images/slide4.jpg"></div>
</artical>
</div>
</div>
<div id="controller">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</body>
</html>