Question

我创建了一个图像滑块。在文档加载事件我在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');
            });
 });

感谢。

Answer 1

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

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

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

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

在文档加载事件上的类上添加图像

1 个答案: