So erstellen Sie eine Slider-Vorschau in Zeitlupe
P粉715274052
2023-08-17 22:42:11
<p>Ich brauchte die Slider-Vorschau, um mich am Bild entlang zu bewegen, aber jetzt bewegt er sich sofort zum Ende</p>
<p>Ich habe versucht, mit zwei Tasten (links und rechts) einen Vorschau-Schieberegler zu erstellen, aber wenn ich die rechte Taste drücke, bewegt er sich bis zum Ende, während ich ihn entsprechend dem Bild bewegen muss
Hier ist der Link:
https://codepen.io/alexvambato/pen/yLGBxKK</p>
<pre class="brush:php;toolbar:false;"><div class="img-container1" style="float:left; margin:10px;max-width: 530px">
<!-- Erstellen Sie einen Schieberegler. -->
<Stil>
/* Stile auf codepen.io anzeigen */
</style>
<div id="thumbelina" style="padding:5px;overflow: versteckt;">
<button class="btnToLeft" onclick="toMovel()"><</button>
<ul id="thumbelina0" style="padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: 0px;">
<li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" /></li>
<li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" /></li>
<li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" /></li>
<li style="padding:5px;width: auto;height: 100px;display: block;"><img style="margin-top: -5px;margin-left: -5px;" />< ;/li>
<li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" /></li>
<li style="padding:5px;width: auto;height: 100px;display: block;"><img src="{{preview_image}}" style="margin-top: -5px;margin-left : -5px;" /></li>
</ul>
<button class="btnToRight" onclick="toMove()">></button>
</div>
</div>
<script>
Funktion toMove() {
var move = document.querySelector('#thumbelina0');
move.setAttribute('style', 'padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: -300px;')
}
Funktion toMovel() {
var move = document.querySelector('#thumbelina0');
move.setAttribute('style', 'padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: 0px;')
}
</script></pre>
<p><br /></p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
要构建一个像那样的滑块，您需要以相同的高度和宽度呈现图像和图片。 例如，100像素，然后每个img都应以强化模式呈现图像。 完成后，您需要在JavaScript中编写一些代码，如下所示：
首先，您需要定义一个指示滑块位置的变量。
var pos = 0; //这应该是全局变量
在movel和move函数中，您需要增加/减少
pos的值。 基于此，您可以设置滑块的margin值，如下所示：move.setAttribute('style', 'padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: '+pos*100+'px;')
当然，pos值应该有图像计数和负值的限制。