jquery无缝切图动画，轮播图

浏览：797次- 评论：0次- 发布时间：2017-06-11

Html

Css

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

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.9.1

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：简单的无缝切图动画，jquery自动运算，只需要修改宽高比例

简单的无缝切图动画，jquery自动运算，只需要修改宽高比例，其他的内容根据需要修改，还有一点就是不要轻易换标签，span标签可以删除，也可以添加文本内容在内

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取