纯JavaScript水平滑块
你好,我正在用缩略图制作幻灯片。 我的幻灯片效果很好,但我希望有一个缩略图的水平幻灯片,因为我没有足够的空间来显示它们。 它可以悬停或单击按钮“上一步/下一步”。 我的代码需要是javascript的,没有库 这里是,整个代码在一个页面中 --编辑 这是我的HTML纯JavaScript水平滑块,javascript,slide,Javascript,Slide,你好,我正在用缩略图制作幻灯片。 我的幻灯片效果很好,但我希望有一个缩略图的水平幻灯片,因为我没有足够的空间来显示它们。 它可以悬停或单击按钮“上一步/下一步”。 我的代码需要是javascript的,没有库 这里是,整个代码在一个页面中 --编辑 这是我的HTML <div class="controls"> <a class="previous" href=""><img src="images/fleche_g.jpg" alt=""></
<div class="controls">
<a class="previous" href=""><img src="images/fleche_g.jpg" alt=""></a>
<div class="thumbs">
<ul id="thumbs">
</ul>
</div>
<a class="next" href=""><img src="images/fleche_d.jpg" alt=""></a>
</div>
还有我尝试调用的两个简单函数,单击一个prev/next按钮
// Move thumbs to the left
function left() {
document.getElementById('thumbs').style.left = '-124px';
}
// Move thumbs to the right
function right() {
document.getElementById('thumbs').style.right = '-124px';
}
到目前为止,一切都不起作用。我缺少什么?我想这就是你解决问题所需要的。1个新函数getLeft();其余部分是对现有函数和css的修改 我认为这应该适用于更多的图像,因此客户端必须多次按下右键才能结束。 您可能还需要额外的计算来限制范围;因此,所有图像都不会超出.wrapper拇指的左右两侧(请随意询问) 注意:也许你想让左边和右边做相反的事情(我两个都见过);只需交换500-500 或者你只需要尽可能多的图片,只需按一下按钮,你就可以完全向左或向右了 css:
只需添加在onclick上调用的方法,该方法计算新id以显示并调用
函数swapSlide(index){
method@BenjaminPoignant缩略图上的clic可以工作,我想出来了。我需要下一个prev按钮的帮助,该按钮可以水平滑动缩略图列表。单击左侧或右侧到底应该做什么?向左或向右500像素?还可以想象可能有更多(或更少)的拇指。
// Move thumbs to the left
function left() {
document.getElementById('thumbs').style.left = '-124px';
}
// Move thumbs to the right
function right() {
document.getElementById('thumbs').style.right = '-124px';
}
#slideshow .controls .wrapper-thumbs {
overflow: hidden;
position: relative; /* this means: the upper-left corner of <div class="wrapper-thumbs"> is now the the new base/zero (for style.left) for all the children with position: absolute */
float: left; /* this is so the left- and right-button are kept in place */
margin: 0;
width: 556px;
height: 76px;
}
#thumbs {
display: inline-block;
width: 900px;
height: 76px;
position: absolute; /* So now, the new base of #thumbs is set to the base/zero of <div class="wrapper-thumbs"> */
z-index: 99;
}
// function reads style.left; removes 'px'; returns the numeric value.
function getLeft() {
var left = document.getElementById('thumbs').style.left;
return Number(left.substr(0, left.length - 2)); // .substr removes the 'px'
}
// Move thumbs to the left
function left() {
var currentLeft = getLeft();
var newLeft = currentLeft -500;
document.getElementById('thumbs').style.left = newLeft + 'px';
}
// Move thumbs to the right
function right() {
var currentLeft = getLeft();
var newLeft = currentLeft +500;
document.getElementById('thumbs').style.left = newLeft + 'px';
}