javascript之制作3d轮播图

最新推荐文章于 2022-06-14 16:53:35 发布

云之前端

最新推荐文章于 2022-06-14 16:53:35 发布

阅读量347

点赞数 3

分类专栏： JavaScript经典案例学习总结文章标签： javascript之3d轮播图

本文链接：https://blog.csdn.net/qq_44586361/article/details/89255515

版权

学习总结同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

JavaScript经典案例

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述
如上图所示为一个3d轮播图的实例，如下我的代码里面有详细描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<title>3d轮播图</title>
<style type="text/css">
	body,ul{margin:0;}
	ul{
		padding-left:0;
		list-style:none;
	}
	.content{
		width:1200px;
		height:367px;
		margin:100px auto 0;
	}
	.imglist{
		width:1200px;
		height:336px;
	}
	.imglist>ul{
		position: relative;
		overflow:hidden;
		width:100%;
		height:100%;
	}
	.imglist>ul>li{
		position:absolute;
		width:730px;
		height:336px;
		transition:0.5s;
	}
	.lineb{width:1200px;height:31px;
		text-align:center;
	}
	.list1{
		transform:translateX(0)scale(0.81);
		transform-origin:0% 100%;
		z-index:1;
	}
	.list2{
		transform:translateX(235px);
		z-index:2;
	}
	.list3{
		transform:translateX(730px)scale(0.81);
		transform-origin:100% 100%;
		z-index:1;
	}
	.list4{
		transform:translateX(965px)scale(0.81);
		transform-origin:100% 100%;
	}
	.list5{
		transform:translateX(1200px)scale(0.81);
		transform-origin: 100% 100%;
	}
	.list6{
		transform: translateX(1425px)scale(0.81);
		transform-origin: 100% 100%;
	}
	.lineb>span{
		display:inline-block;
		width:35px;
		height:3px;
		background-color:#ccc;
	}
</style>
</head>
<body>
<div class="content">
	<div class="imglist">
		<ul>
			<li class="list1"><img src="image/1.jpg"></li>
			<li class="list2"><img src="image/2.jpg"></li>
			<li class="list3"><img src="image/3.jpg"></li>
			<li class="list4"><img src="image/4.jpg"></li>
			<li class="list5"><img src="image/5.jpg"></li>
			<li class="list6"><img src="image/6.jpg"></li>
		</ul>
	</div>
	<div class="lineb">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
<script type="text/javascript">
	//1:设置按钮的颜色；
	//1.1获取当前应该变色的按钮的索引值
	//1.2找到该元素并设置一个绿色
	var index=0;//默认情况下第一个按钮变成绿色
	var aSpan=document.querySelectorAll("span")//把所有的按钮放到一个数组里
	var aListName=['list1','list2','list3','list4','list5','list6']
	var aLi=document.querySelectorAll('li')
	function setLineBColor(){
		for(var i=0,len=aSpan.length;i<len;i++){
          aSpan[i].style.background='#ccc';
          aSpan[index].style.background='#45c17c';
		}
	}
	setLineBColor()
    function nextPic(){
    	aListName.unshift(aListName[5]);//把数组最后一个名字复制并插入到第一个位置来
    	aListName.pop()//删除最后一个值
    	for(var i=0,len=aLi.length;i<len;i++){
    	aLi[i].setAttribute('class',aListName[i]);
    	}
    	index++;
    	if(index>5){
    		index=0;
    	}
        setLineBColor()
    }
    function prePic(){
    	aListName.push(aListName[0]);
    	aListName.shift();
    	for(var i=0,len=aListName.length;i<len;i++){
    		aLi[i].setAttribute('class',aListName[i]);
    		index--;
    		if(index<0){
    			index=5;
    		}
    		setLineBColor();
    	}
    }
    var list1=document.querySelector('.list1');
	var list3=document.querySelector('.list3');
    var imgList=document.querySelector(".imglist");
    imgList.addEventListener("click",function(ev){
    if(ev.target.parentNode.getAttribute("class")==="list3"){
    	nextPic();
    }
    else if(ev.target.parentNode.getAttribute("class")==="list1"){
       prePic();
    }
    })
</script>
</body>
</html>

云之前端

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
javascript之制作3d轮播图

如上图所示为一个3d轮播图的实例，如下我的代码里面有详细描述<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="keywords" content=""> <title>3d轮播图</title><style type=...
复制链接

扫一扫