Javascript JQuery-可拖动DIV在图像之间淡入淡出？_Javascript_Jquery_Html_Css_Slider

Javascript JQuery-可拖动DIV在图像之间淡入淡出？

javascript jquery html css

Javascript JQuery-可拖动DIV在图像之间淡入淡出？,javascript,jquery,html,css,slider,Javascript,Jquery,Html,Css,Slider,这里有一个关于我的问题我想左右拖动滑块（上面有语音气泡）。当它在后面的栏上的蓝色和绿色之间滑动时，它会将图像1的不透明度设置为90%，将图像2的不透明度设置为10%，图像1 80%图像2 20%，图像1 70%-图像2 30%以此类推，直到滑块到达绿色末端，图像1的不透明度设置为0%，图像2设置为100%，然后随着滑块不断向右滑动，从绿色滑到红色，图像2达到0%，图像3达到100%。对下一个图像重复我看了一下，它似乎做了我想要的，但我不确定如何获得滑块的X位置，然后将其应用于image1、i

这里有一个关于我的问题

我想左右拖动滑块（上面有语音气泡）。当它在后面的栏上的蓝色和绿色之间滑动时，它会将

图像1的不透明度设置为90%

，将

图像2的不透明度设置为10%

，

图像1 80%图像2 20%，图像1 70%-图像2 30%

以此类推，直到滑块到达绿色末端，

图像1的不透明度设置为0%，图像2设置为100%
，然后随着滑块不断向右滑动，从绿色滑到红色，图像2达到0%，图像3达到100%
。对下一个图像重复
我看了一下，它似乎做了我想要的，但我不确定如何获得滑块的X位置，然后将其应用于image1、image2、image3、image4的不透明度
滑块宽度为960px
，因此960/4=240
，对于沿滑块的每个240像素
，不透明度需要设置为0-100%
首先，这在jquery中可能吗？第二，有人能帮我写代码或者给我看一些可能有用的链接吗？

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Slider</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( "#slider" ).slider({

        range: "min",
                 value: 0,
                 min: 0,
                 max: 10,

                 slide: function (event, ui) {
                     var r = (ui.value); 
                     $("#img1").css({'opacity':r/10});
                     $("#img2").css({'opacity':1-(r/10)});
}   
    })
    });
    </script>
</head>
<body>
<img id = "img1" src = "http://www.gettyimages.com/images/marketing/frontdoorStill/PanoramicImagesRM/FD_image.jpg" style = "height:200px; width:200px">
<img id = "img2" src = "http://www.gettyimages.com/images/marketing/frontdoorStill/PanoramicImagesRM/FD_image.jpg" style = "height:200px; width:200px">
<div id="slider" style = "height:10px; width:400px" ></div>
</body>
</html>

jQueryUI滑块
$（函数（）{
$（“#滑块”）.滑块({
射程：“分钟”，
值：0，
分:0,，
最高：10，
幻灯片：功能（事件、用户界面）{
var r=（ui.value）；
$（“#img1”）.css（{'opacity'：r/10}）；
$（“#img2”）.css（{'opacity'：1-（r/10）}）；
}   
})
});
我看不到示例中的图像：/Yes我使用了相同的滑块。我可以给你有用的提示！这些图像是在每个顶部@antimate由Z-INDEX:）排列的，因此如果我将顶部图像的不透明度设置为50%，下面图像的50%将显示出来。嗨，MJQ，感谢这个示例，这只适用于2张图像。我不知道如何扩展这4张图片？它可以扩展。只需创建一个逻辑并在更改属性时添加它。那由你决定！嗨，MJQ，我对javascript/jquery还很陌生。你能告诉我“生成逻辑”是什么意思吗？？？你必须根据要添加的图像数量设置不透明度。只要理解我共享的代码，然后增强它。太简单了！你好，MJQ。你的代码不起作用。我试着把它放在JSFIDLE中，但它不起作用。