炫酷原码切割轮播图

浏览：658次- 评论：0次- 发布时间：2017-09-19

Html

Css

ul {
	list-style:none;
	padding:0;
	width:500px;
	height:300px;
	margin:100px auto;
	border:1px solid gray;
	position:relative;
	display:flex;
}
li {
	/* 两张版本 */
			width:25%;
	height:100%;
	position:relative;
	/* 让div在3d空间中 能够看到效果 */
			transform-style:preserve-3d;
	/* 添加过渡属性 */
			transition:all 1s;
}
/*  左右按钮 */
		ul>a {
	font-size:40px;
	color:white;
	background-color:gray;
	position:absolute;
	width:50px;
	height:50px;
	text-align:center;
	line-height:50px;
	text-decoration:none;
	font-weight:900;
}
ul .left {
	left:-50px;
	top:50%;
	transform:translateY(-25px);
}
ul .right {
	right:-50px;
	top:50%;
	transform:translateY(-25px);
}
li>div {
	width:100%;
	height:100%;
	position:absolute;
}
.first {
	background:url(http://www.sucainiu.com/themes/images/demo/500x300-1.png') no-repeat;
	transform:rotateX(0deg) translateZ(190px);
}
.second {
	background:url('http://www.sucainiu.com/themes/images/demo/500x300-2.png') no-repeat;
	transform:rotateX(-90deg) translateZ(190px);
}
.third {
	background:url('http://www.sucainiu.com/themes/images/demo/500x300-3.png') no-repeat;
	transform:rotateX(-180deg) translateZ(190px);
}
.four {
	background:url('http://www.sucainiu.com/themes/images/demo/500x300-4.png') no-repeat;
	transform:rotateX(-270deg) translateZ(190px);
}
/* 设置 第二个区域的li标签内部 div backgroun的偏移值 */
		li:nth-child(2) {
	transition:all 1s .1s;
}
li:nth-child(3) {
	transition:all 1s .2s;
}
li:nth-child(4) {
	transition:all 1s .3s;
}
li:nth-child(2)>div {
	background-position:-125px 0;
}
li:nth-child(3)>div {
	background-position:-250px 0;
}
li:nth-child(4)>div {
	background-position:-375px 0;
}

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

jQuery调用版本：1.11.3

立即下载收藏

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

代码描述：手写炫酷的jQuery轮播图

用的是c3的3d盒子的原理,图片用四个盒子调整背景图片的位置拼成,点击切换的时候,3d旋转盒子,从第一个旋转到最后一个,每个盒子设一定的延迟

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

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

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