JQ动画和特效轮播图

引用块内容
animate.css
jquery-1.8.3.min.js

JS中的代码

var pigs=['images/1.jpg','images/2.jpg','images/3.jpg'];
        var str="";
        function fun(){

             str=(str+1)%3;
            $("img").addClass("donghua");
            $("img").attr('src',pigs[str]);

        };
        var t=setInterval(fun,2000);
        $("img").hover(function(){
           clearInterval(t);
            $("img").removeClass("donghua");
        },function(){
            t=setInterval(fun,2000);
        })

CSS中样式

.donghua{
            animation:flipInX 2s infinite;
            -webkit-animation:flipInX 2s infinite;
            -moz-animation: flipInX 2s infinite;
            -ms-animation:flipInX 2s infinite;
            -o-animation: flipInX 2s infinite;
        }

因为JQ中动画不支持transform，所以我们通过css3来制作动画
在JQ函数执行完成后，给轮播图片添加类名，执行css3永久动画，并且在执行hover函数鼠标移入去除类名