html 轮播切图,jquery无缝切图动画，轮播图

var z = $(".box-go li").length //获得box-go里的li数量

var x = $(window).width() //获取窗口的宽，

var y = 0.4 * x //这里的计算公式是根据图标宽高比例得到的

var b = $(".box-go2 li").length //获取li的个数

$(".box2").css("width", x); //大盒子的宽

$(".box2").css("height", y); //大盒子的高，var y = 0.25*x//这里的计算公式是根据图标宽高比例得到的

$(".box-go2").css("width", b * x); //装图片文字的大盒子ul的宽=窗口的宽*li的个数

$(".box-go2 li").css("width", x); //li的宽

var a = 0

//document.title = b

$(".quan i").eq(0).addClass("red")

//右边按钮部分

$(".btn2-r").click(function() { //朝左

if (a < (b - 2)) {

a = a + 1;

$(".quan i").removeClass("red").eq(a).addClass("red")

} else if (a < (b - 1)) {

a = a + 1;

$(".quan i").removeClass("red").eq(0).addClass("red")

} else {

a = 1

$(".box-go2").css("left", 0);

$(".quan i").removeClass("red").eq(1).addClass("red")

}

$(".box-go2").stop().animate({

left: -x * a

})

}).mouseleave(function() {

ee = a

})

///左边按钮部分

$(".btn2-l").click(function() { //朝右

if (a > 1) { //为了保留重复的第一张，显示红点

a = a - 1

$(".quan i").removeClass("red").eq(a).addClass("red") //这里是中间部分的显示

} else if (a > 0) {

a = a - 1 //对应的这里到了第一张图片，所以要把第一个点显示出来

$(".quan i").removeClass("red").eq(0).addClass("red")

} else {

a = b - 2 //这里是最右边，第5个点的显示

$(".box-go2").css("left", -x * (a + 1))

$(".quan i").removeClass("red").eq(b - 2).addClass("red")

};

$(".box-go2").stop().animate({

left: -x * a

});

}).mouseleave(function() {

ee = a

})

$(".quan i").mouseenter(function() {

var d = $(this).index();

$(".box-go2").stop().animate({

left: -x * d

});

$(".quan i").removeClass("red").eq(d).addClass("red");

ee = d

a = d

})

var ee = 0

var tt = setInterval(function() {

if (ee < (b - 2)) {

ee = ee + 1

$(".quan i").removeClass("red").eq(ee).addClass("red")

} else if (ee < (b - 1)) {

ee = ee + 1;

$(".quan i").removeClass("red").eq(0).addClass("red")

} else {

ee = 1

$(".box-go2").css("left", 0);

$(".quan i").removeClass("red").eq(1).addClass("red")

}

$(".box-go2").animate({

left: -x * ee

});

}, 2000)

$(".box2").mouseenter(function() {

clearInterval(tt)

a = ee

}).mouseleave(function() {

tt = setInterval(function() {

if (ee < (b - 2)) {

ee = ee + 1

$(".quan i").removeClass("red").eq(ee).addClass("red")

} else if (ee < (b - 1)) {

ee = ee + 1;

$(".quan i").removeClass("red").eq(0).addClass("red")

} else {

ee = 1

$(".box-go2").css("left", 0);

$(".quan i").removeClass("red").eq(1).addClass("red")

}

$(".box-go2").animate({

left: -x * ee

});

}, 2000)

})