最少的代码实现3d轮播图

该博客介绍了利用CSS3D转换来实现简单轮播图的方法,可通过CSS控制以及JS控制节点的移除和增加达成,也可采用原生JS来实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

利用css3d转换,通过css控制和js控制节点的移除增加实现一个简单的轮播图

<div class="swiperCont clearx" id="stage">
				<div class="list">1</div>
				<div class="list" style="background: chartreuse;">2</div>
				<div class="list" style="background: saddlebrown;">3</div>
				<div class="list" style="background: aqua;">4</div>
				<div class="list" style="background: wheat;">5</div>
			</div>
.swiperCont{height: 400px;background: url(../img/jiameng/swiperBg.png) no-repeat bottom center;background-size:100% auto;}
.swiperCont {
  width: 1200px;
  height: 396px;
  margin: 0 auto;
  padding: 74px 0;
  position: relative;
  overflow: hidden;
}
.swiperCont .list {
  width: 434px;
  height: 322px;
  background: green;
  position: absolute;
  border-radius: 10px;
  transition: all .3s;
}
.swiperCont .list:nth-child(1){
	left: -220px;
	transform: perspective(1200px) rotateY(-65deg) scale(0.6);
}
.swiperCont .list:nth-child(2){
	left: 0px;
	transform: perspective(1200px) rotateY(-40deg)  scale(0.8);
}
.swiperCont .list:nth-child(3){
	left:400px;
	transform:  perspective(1200px) rotateY(0deg);
}
.swiperCont .list:nth-child(4){
	left: 800px;
	transform: perspective(1200px) rotateY(40deg) scale(0.8);
}
.swiperCont .list:nth-child(5){
	left: 1000px;
	transform: perspective(1200px) rotateY(65deg) scale(0.6);
}
.swiperCont .list:nth-child(6){
	left: 1200px;
	transform: perspective(1200px) rotateY(65deg) scale(0.6);
}

setInterval(function(){
		var caheHtml = $('.list').eq(0).html();
		$('.list').eq(0).css({
			'left': -400
		})
		setTimeout(function(){
			$('.list').eq(0).remove()
		},50)
		
		$('.swiperCont').append('<div class="list" style="background: wheat;">'+caheHtml+'</div>')
	},1000)

或者原生js

setInterval(function(){
		var ele = document.getElementsByClassName('list')[0],
			elePar = ele.parentNode,
			cacheHtml = ele.innerHTML;
		ele.style.left = '-400px';
		setTimeout(function(){
			elePar.removeChild(ele);
		},50)
		var div = document.createElement("div");
		div.setAttribute("class", "list");
		div.innerHTML = cacheHtml;
		elePar.appendChild(div);
	},1000)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值