2013-05-03 28 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,使其更容易看到所有的图片...