Question

我需要滚动图像由两个箭头控制（向上滚动并向下滚动）。我有一个CSS＆＃34; scrollUp＆＃34;写的动画以及＆＃34; scrollDown＆＃34;动画。单击箭头时，如何在图像中显示这些动画？

我想我需要一个＆＃34; scrollUp＆＃34; class和a＆＃34; scrollDown＆＃34;类适用于图像。但我不确定如何使一个箭头激活＆＃34; scrollUp＆＃34;类动画和另一个激活＆＃34; scrollDown＆＃34;动画。

我见过人们使用href =＆＃34;＃something＆＃34;激活ID动画，但我的图片不能有多个ID，因此无法使用。

任何帮助将不胜感激！如果你知道任何视频教程也会很棒！我并不反对使用JavaScript，但我更喜欢使用CSS。

编辑：每当点击一个按钮时，我基本上都需要以下代码来激活一个图像：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web browsers</title>
<style type="text/css">
body {
    margin-left: 100px;
margin-top: 100px;
}
#header {
height: 256px;
width: 256px;
overflow: hidden;
border:1px solid gray;
}
.slider {
animation: myanimation 8s ease-in-out infinite alternate;   
}
@keyframes myanimation
{   
0% {transform:translateY(0px); }
25% {transform:translateY(-256px); }
50% {transform:translateY(-512px);}
75% {transform:translateY(-768px);}
100% {transform:translateY(-1024px);}               
}
</style>
</head>
<body>
<div id="header">
<img class="slider" src="img1.png" width="256" height="256">
<img class="slider" src="img2.png" width="256" height="256">
<img class="slider" src="img3.png" width="256" height="256">
<img class="slider" src="img4.png" width="256" height="256" >
<img class="slider" src="img5.png" width="256" height="256">
</div>
</body>
</html>

Answer 1

它不是语法上最好的解决方案，但您可以将图像滚动条包装在<input type="checkbox" id="scroll-up-control">标记内，然后选择#scroll-up-control:checked以应用样式进行向上滚动，使用上面列出的默认值向下滚动。

我会使用一些简单的javascript来将一个类应用到容器中，但是是否向上或向下滚动。

Answer 2

我能够通过更改用于实际滚动图像的方法来解决此问题。我决定使用带有隐藏滚动条的iFrame。 Javascript允许按钮控制iFrame的滚动。感谢所有帮助！

使用按钮控制CSS动画

2 个答案: