jquery无缝切图动画，轮播图

Html

Css

body,ul,li,b {
	margin:0;
	padding:0;
}
.box2 {
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
.box-go2 {
	position:relative;
}
.box-go2 li {
	position:relative;
	list-style:none;
	float:left;
}
.box-go2 li span {
	position:absolute;
	color:rgba(0,255,187,0.73);
	font-size:40px;
	left:20%;
	top:5%;
	float:left;
	z-index:5;
}
.box-go2 img {
	width:100%;
	position:relative;
	top:0;
	left:0;
}
.box2 b {
	color:red;
	position:absolute;
	top:30%;
	background:rgba(244,130,132,0.4);
	display:block;
	padding:8px 20px;
	border-radius:5px;
	font-size:30px;
	cursor:pointer;
}
.box2 .btn2-l {
	left:2%;
}
.box2 .btn2-r {
	right:2%;
}
.box2 .quan {
	position:absolute;
	bottom:30px;
	left:40%;
	z-index:30;
	height:20px;
}
.box2 i {
	display:inline-block;
	width:20px;
	height:20px;
	border-radius:50%;
	background:gray;
	margin:0 10px;
}
.quan .red {
	background:red;
}

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

立即下载

jquery无缝切图动画，轮播图



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

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

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?UI小强

相关代码

jquery无缝切图动画，轮播图

最新