Question

我正在尝试使用没有Javascript导航的关键帧创建CSS图像滑块。理想情况下，最终目标是传统滑块（具有Javascript）中的前进/后退链接或按钮。

到目前为止，我有这个：

 <style type="text/css">
    @keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }

    body { margin: 0; } 
    div#slider { overflow: hidden; }
    div#slider figure img { width: 20%; float: left; }
    div#slider figure { 
      position: relative;
      width: 500%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 30s slidy infinite; 
    }
    	</style>


    </head>

    <body>

    <div id="slider">
    <figure>
    <img   src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Cheshire1a.jpg" alt>
    <img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Derbyshire1a.jpg" alt>
    <img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Devon1a.jpg" alt>
    <img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Essex1a.jpg" alt>
    <img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_GreaterManchester1a.jpg" alt>
    </figure>
    </div>

    </body>
    </html>

Answer 1

我只是想把你联系到一些可以帮助你实现这一目标的资源。

首先，这里是如何在纯CSS中更改内容（滚动到“2017答案” Can I have an onclick effect in CSS?

这里有一些有用的信息可以改变其他元素的值，例如：hover，它可以使用：也可以检查。 How to affect other elements when a div is hovered 我希望这会对你有所帮助，尽管你可能不得不使用转换而不是动画以及scale属性。

在没有Javascript的情况下为CSS关键帧滑块创建前进/后退链接

1 个答案: