Question

我有三张图片1.jpg，2.jpg，3.jpg＆amp; <img id="add" src="1.jpg"></img>宽度，高度和宽度该图像的位置根据需要设置＆amp;工作正常。我已经应用了JQUERY淡入淡出属性来切换上面的图像和它也工作正常。

但我确切地想要图像以滑动方式改变，即1.jpg向左滑动并消失并在2.jpg中拖动它的位置和放大器。等等在特定的时间间隔继续。

希望我很清楚...

问候。

Answer 1

谢谢各位大家的努力，但是，我自己配置了......以下是它的工作原理：

的index.html：

<html>

<head>
    <script src="jquery.js"></script>
    <script src="slide.js"></script>
</head>

<body>
    <div >
        <img id="pic1" src="1.jpg"style="width:0px;height:120px;"/><img id="pic2" src="2.jpg" style="width:160px;height:120px;"/>
    </div>
</body>

</html>

slide.js

$("document").ready(function(){
    var img_l=$("#pic1");
    var img_r=$("#pic2");
    setInterval(function(){
        img_l.animate({width:'160px'},1000);;    //animating the image t colapse
        img_r.animate({width:'0px'},1000);;      //animating the image t expand
        var temp_var=img_l;                      //swaping values to revert previous action
        img_l=img_r;
        img_r=temp_var;
    },3000);                                    //repeating the effect every 3 seconds
});

这符合我的要求，并且在所有主流浏览器中具有完全相同的行为...... 感谢。

JQUERY在图像变化时创建滑动效果

1 个答案: