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

最新推荐文章于 2025-05-29 14:43:26 发布

灿尔哈擦苏

最新推荐文章于 2025-05-29 14:43:26 发布

阅读量872

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发 js

本文链接：https://blog.youkuaiyun.com/susuzhe123/article/details/88746919

web前端开发同时被 2 个专栏收录

82 篇文章

订阅专栏

64 篇文章

订阅专栏

该博客介绍了利用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)