JQUERY創建滑動的效果，同時圖像改變

我有三個圖像1.JPG，2.JPG，3.JPG & <img id="add" src="1.jpg"></img>寬度，根據需要&工作正常該圖像的高度&位置被設定。我已經應用JQUERY淡入淡出屬性來切換上面的圖片&其工作正常。JQUERY創建滑動的效果，同時圖像改變

但我想要的是，圖像以滑動方式變化，即1.jpg幻燈片左側消失並拖動到2.jpg位置&繼續按特定間隔繼續。

希望我很清楚...

問候。

來源

2014-03-04 Anirban

分享你的嘗試。 – loxxy

Yhank大家對你的努力，但是，我配置它自己...這裏是它的工作原理：

的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 
});

這與我的要求相得益彰，並且在所有主流瀏覽器中具有完全相同的行爲... 謝謝。

來源

2014-03-05 13:21:51 Anirban

JQUERY創建滑動的效果，同時圖像改變

回答

相關問題