用css3实现自动轮播，hover暂停，点击圆点手动切换效果怎么实现？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .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;}

    </style>
</head>
<body>
    <div>
        <span id="banner1"></span>
        <span id="banner2"></span>
        <span id="banner3"></span>
        <ul>
            <li id="red"></li>
            <li id="green"></li>
            <li id="blue"></li>
        </ul>
        <div><a href="#banner1" ></a><a href="#banner2"></a><a href="#banner3"></a></div>
    </div>
</body>
</html>
oldwan
浏览 2803回答 1
1回答

随时随地看视频慕课网APP