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

谢谢。

4

1 回答 1

0

您仅在单击图像时应用旋转。要解决此问题，请选择第一张图像并将旋转应用于所有其他图像。

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

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

我还添加了一些悬停功能，并更新了 css 以更容易查看所有图像......

于 2013-05-03T07:08:48.190 回答