html图片自动轮播代码只暂停一次,用css3实现自动轮播，hover暂停，点击圆点手动切换效果怎么实现？...

html>

Document

.parent{width: 200px;height: 100px;overflow: hidden;position: relative;}

ul,#red,#green,#blue{box-sizing: border-box; margin: 0px;padding: 0px;list-style: none;}

ul{width: 600px;height: 100px;position: relative;transition: left 2s ease-in-out;}

#red,#green,#blue{float: left; width: 200px;height: 100px;}

#red{background-color: red;}

#green{background-color: green;}

#blue{background-color: blue;}

/*圆点样式*/

.dot{position: absolute;right: 0px;bottom: 5px;z-index: 100;}

.dot a{display: inline-block; width: 15px;height: 15px;border-radius: 15px; margin-right:5px; background-color: #fff; }

.dot a:hover{background-color: grey;}

/*定义动作*/

@keyframes mymove{ 0%{left: -0px} 50%{left: -200px} 100%{left: -400px} }

/*引入动作*/

ul{animation: mymove 6s infinite alternate;}

ul:hover{animation-play-state: paused;}

/*跳转至锚点banner1时ul执行下面的样式????????不过貌似和上面的动画不能一起用??????该怎么实现*/

#banner1:target~ul{left:0px;}

#banner2:target~ul{left:-200px;}

#banner3:target~ul{left:-400px;}