使用幻灯片在 3 张图像之间过渡不透明度答案

【问题标题】：Transition opacity between 3 images using slide使用幻灯片在 3 张图像之间过渡不透明度
【发布时间】：2014-08-06 12:43:39
【问题描述】：

我将三张图像叠放在另一张上，下面有一个 jQuery 幻灯片。我希望改变图像的不透明度，以便当您从左向右滑动时，图像会按如下顺序平滑淡入/淡出：

向左滑动。不透明度为 100% 的 img 1 图像 2 在 0 图像 3 在 0

在中间滑动。图像 1 在 0 图像 2 在 100 图像 3 在 0

向右滑动图像 1 在 0 图像 2 在 0 图像 3 100%

我在http://jsfiddle.net/greggbanse/PWc6m/ 有一个 Fiddle 设置我知道代码是错误的，但我可以使用一些指针来说明如何最好地执行它。 TIA。

    $(function() {
        $( "#slider" ).slider({

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

            slide: function (event, ui) {
                var r = (ui.value); 
                $("#img1,#txt1").css({'opacity':r/100});
                $("#img2,#txt2").css({'opacity':1-(r/100)});
                $("#img3,#txt3").css({'opacity':2-(r/100)});
            }   
        })
    });

HTML

<img id="img1" src="http://www.norwich.edu/wp-content/uploads/home_oral_history.jpg" style="position:absolute;left:0;z-index:3000;">
<div id="txt1" style="position:absolute;left:0;z-index:3000;top:160px;background-color:#fff;">This is the text for the first image.</div>
<img id="img2" src="http://www.norwich.edu/wp-content/uploads/2013/12/condoleezza-rice.jpg" style="position:absolute;left:0;z-index:2000;">
<div id="txt2" style="position:absolute;left:0;z-index:2000;top:160px;background-color:#fff;">More text but this is the explanation text for the second image.</div>
<img id="img3" src="http://www.norwich.edu/wp-content/uploads/2014/05/CGCSresidency.jpg" style="position:absolute;left:0;z-index:1000;">
<div id="txt3" style="position:absolute;left:0;z-index:1000;top:160px;background-color:#fff;">And now we have yet more text for the third and final image.</div>
<div id="slider" style="height:10px; width:400px; position:relative;top:240px;"></div>

【问题讨论】：

标签： jquery css transition opacity jquery-ui-slider

【解决方案1】：

我稍微调整了你的公式：

$("#img1,#txt1").css({'opacity':1-(r*0.02)});
$("#img2,#txt2").css({'opacity':r*0.02+Math.floor((1-r*0.02))*(r-50)*0.04});
$("#img3,#txt3").css({'opacity':(r*0.02)-1});

这里是demo。

据我了解，这是您试图实现的目标，但它适合您的情况吗？

【讨论】：