JQ动画图片切换

HTML部分

    

        

            

        

        

            

        

        

            

        

        

            

        

    

    

        

            

        

        

            

        

    

JQ部分 

简单方法不可操作动画效果

//移入移出事件

$(".all").mouseover(function(){

    $(".btn").show();

})

$(".all").mouseout(function(){

    $(".btn").hide();

})

//点击事件

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

    $(".img:first").insertAfter(".img:last");

})

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

    $(".img:last").insertBefore(".img:first");

})

可更改动画效果（渐入效果）

//移入移出事件

$(".all").mouseover(function(){

    $(".btn").show();

})

$(".all").mouseout(function(){

    $(".btn").hide();

})

var n = 0;

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

    if ( n < $(".img").length-1) {

        n++;

    }else{

        n = 0;

    }

    $(".img").eq(n).siblings().fadeOut(500);

    $(".img").eq(n).fadeIn(500);

})

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

    if ( n > 0) {

        n--;

    }else{

        n = $(".img").length-1;

    }

    $(".img").eq(n).siblings().fadeOut(500);

    $(".img").eq(n).fadeIn(500);

})

}