jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 » JavaScript 討論 » 關於jQuery圖片由右到左的輪播效果!

roylin 發表於 2012-6-27 12:43

關於jQuery圖片由右到左的輪播效果!

請問我有七張圖片要做由右到左的輪播效果，每張圖片的寬和高都是150，共七張圖，以下的語法不知道哪裡有錯，圖片由右到左跑一張之後就全部消失不見??:'(

$(function(){
  var i=0;
   $('#block .imgbk').each(function(){
          $(this).css({ top:0, left:150*i});
          i++;
   });
  var royInterval= setInterval(run, 2000);
  var imgLen = $('#block  .imgbk').length;
     function run(){
                 $('#block .imgbk').each(function(){
                        $(this).animate({ left: "-=150"},1000, function(){
                                if($(this).position().left=-150){
                                        $(this).css({left: $(this).position().left+imgLen *150});
                                 }
                        });
             });
         }   
  });

jocosn 發表於 2012-9-12 04:24

[i=s] 本帖最後由 jocosn 於 2012-9-20 03:44 編輯 [/i]

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=3165&ptid=1850]1#[/url] [i]roylin[/i] [/b]


    請你打在 jsfiddle.net，這樣別人才好幫你測試。



$('#block .imgbk').each(function(){ ...
你用 each ，當然會一起跑 animation，應該在 animation 的 callback 呼叫下一張圖跑 slide

要不你就用這個插件吧，其中有個像右滑動特效
[url]http://jquery.malsup.com/cycle/[/url]

查看完整版本: 關於jQuery圖片由右到左的輪播效果!