Javascript 在jquery中是否可以使用拖动滑块在4个图像之间滑动？

我有4个图像和一个滑块：

[image1.jpg]----[image2.jpg]----[image3.jpg]----[image4.jpg]
-----------------------------[Slider]-----------------------

是否可以单击并拖动滑块，以便当滑块位于位置1和2之间时，图像1和2设置为50%透明度，然后当滑块到达位置2时，图像2为100%不透明，图像1为100%透明。然后从位置2滑动到位置3时，图像2变为90%，图像3变为10%，下一个位置图像2变为80%，图像3变为20%，等等。。。直到滑块位于位置3且图像3完全可见且图像2 100%透明

---

可能吗？我会使用数组，还是获取滑块的X位置并相应地调整图像透明度？

检查，它有很多功能，包括通过图像滑动（div）

使用UI滑块绝对是100%可行的。我想看看jQuery的UI滑块。以下是他们如何使用它不断改变颜色的示例：

虽然不同，但总体思路是相同的——随着滑块值的变化，您只需根据图像的不透明度调整滑块值。我认为您的后一个想法（“获取滑块的X位置并相应地调整图像透明度？”）是解决此问题的一个非常好的方法。您可能可以将其设置为0对于image1是100%可见的，25对于image2是100%可见的，依此类推。如果您需要更多帮助，请告诉我们：

这是我的尝试：。它使用jQuery，但没有插件（我相信它也可以使用普通JavaScript编写）

代码可以自我解释，但下面是JavaScript部分的注释版本：

$(".slider").scroll(function() {
   var imgs = $(".slider img"); //find all images in the slider
    imgs.each(function() { //for each of them
        var cur = $(this); //save the current image in cur
        var lft = cur.offset().left; //find out its left offset
        if(lft <= 0) { //if it's been scrolled past (its offset is negative)
            cur.css({opacity: Math.max(0, (300 + lft) / 300)}); //then set its opacity to a value proportional to its left offset
        }
        else {
            cur.css({opacity: Math.min(1, (500 - lft) / 500)}); //it's not scrolled past yet; set its opacity appropriately
        }
    });
});

$（“.slider”）.滚动（函数（）{
var imgs=$（“.slider img”）；//查找滑块中的所有图像
imgs.each（函数（）{//
var cur=$（this）；//在cur中保存当前图像
var lft=cur.offset（）.left；//找出它的左偏移量
如果（lft，这绝对是可能的。你能制作一个JSFIDLE吗？这需要实验！这是一个可拖动的图像滑块插件；非常完美，谢谢！！！我现在只需要排列图像，使它们彼此重叠。谢谢！）@GT22如果它对您有效，请不要忘记单击此答案旁边的绿色勾号，将其标记为已接受！确实如此，但我无法使图像彼此重叠，因此我现在还不接受它。我将继续玩Z-index，看看我能想出什么。感谢您迄今为止的帮助！：）