gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:07:50 25 4
gpt4 key购买 nike

我有三张图片 1.jpg,2.jpg,3.jpg & <img id="add" src="1.jpg"></img>此图像的宽度、高度和位置已根据需要设置并且工作正常。我已经应用 JQUERY fade 属性在上面的图像之间切换,它也工作正常。

但我恰恰希望图像以滑动方式变化,即 1.jpg 向左滑动并消失并拖入 2.jpg 的位置等,以特定间隔继续。

希望我清楚...

问候。

最佳答案

感谢大家的努力,但是,我自己配置​​了它......这是它的工作原理:

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>

幻灯片.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
});

这很好地满足了我的要求,并且在所有领先的浏览器中都具有完全相同的行为......谢谢。

关于javascript - JQUERY 在图像变化时创建滑动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22165988/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com