Question

我有三个图像一个堆叠在另一个上面，下面有一个jQuery幻灯片。我希望图像不透明度能够改变，这样当你从左向右滑动时，图像将按顺序淡入/淡出：

向左滑动。 img 1在100％不透明度 img 2 at 0 img 3 at 0

滑入中间。 img 1 at 0 img 2 at 100 img 3 at 0

向右滑动 img 1 at 0 img 2 at 0 img 3 at 100％

我在http://jsfiddle.net/greggbanse/PWc6m/有一个小提琴设置我知道代码是错误的但我可以使用一些指针来说明如何最好地执行它。 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>

Answer 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。

根据我的理解，这是你试图实现的目标，但它是否适用于你的情况？

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

1 个答案: