2013-05-03 27 views
0

我已經創建了一個圖像滑塊。在文檔加載事件中,我將在t1類中添加所有左側圖像以使它們保持一致。同樣,我在t2中添加右側圖像以將其彎曲成其他角度。階級添加圖片上的文件加載事件

但問題是,當圖像加載他們都面臨着相同的方向。只有點擊任何圖像後,它們才能完美對齊。

這就是小提琴:: http://jsfiddle.net/simmi_simmi123/Pukjw/

$(document).ready(function() { 
     $('#myImageFlow img').slice(1,5).addClass('t1'); 

     $('#myImageFlow img').slice(-3).addClass('t2'); 

     $("div img:first-child").removeClass('t2'); 

      alert("first freeeeeeee"); 

      $("img").click(function(){ 

      console.log('i am Image Flip'); 

       var t = $(this); 
       this.className = ''; 

       t.prevAll().removeClass('t2').addClass('t1'); 
       t.nextAll().removeClass('t1').addClass('t2'); 
      }); 
}); 

感謝。

+0

你必須拿出相應的CSS對齊/旋轉圖像以瞭解如何解決這個問題。 – jfriend00 2013-05-03 06:35:08

+0

我們需要一個jsfiddle的工作示例,能夠完全幫助 – Timidfriendly 2013-05-03 06:37:13

+0

jsfiddle添加我不能添加整個代碼,但請參閱你會得到IDE – anam 2013-05-03 07:02:33

回答

0

您只在點擊圖像時應用旋轉。要解決此問題,請選擇第一張圖像並將旋轉應用於所有其他圖像。

$("#myImageFlow img:first").nextAll().removeClass('t1').addClass('t2'); 

更新後的提琴 - http://jsfiddle.net/Pukjw/4/

香港專業教育學院還增加了一些懸停功能,並且更新了CSS,使其更容易看到所有的圖片...