第一种:
用了css3进行3D效果轮播
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.view {
width: 560px;
height: 300px;
margin: 100px auto;
position: relative;
}
ul {
width: 100%;
height: 100%;
list-style: none;
/* transform: rotate3d(1,1,0,-30deg); */
/* transform-style使被转换的子元素保留其 3D 转换,当某个元素进行3D转换的时候,保留其3D属性 就是3D*/
transform-style: preserve-3d;
}
ul>li {
width: 100%;
height: 25%;
float: left;
position: relative;
transform-style: preserve-3d;
/* 添加过渡效果 */
transition: transform 0.3s;
}
/* 设置每一个切片图像的一小块内容 */
ul>li>span {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
ul>li>span:nth-of-type(1) {
background-image: url("images/q1.jpg");
/* 想z轴正方向偏移,也就是往垂直于面向我们的平面移动 */
transform: translateZ(280px);
}
ul>li>span:nth-of-type(2) {
background-image: url("images/q2.jpg");
/* 通过这样Y轴位移和X轴旋转,让第二张放置于正方体的上方 */
transform: translateX(280px) rotateY(90deg);
}
ul>li>span:nth-of-type(3) {
background-image: url("images/q3.jpg");
/* Z轴平移到画面的后方,再通过180度的X轴旋转,让图片倒立,到时候翻转过来的时候,图片的显示正常的。 */
transform: translateZ(-280px) rotateY(180deg);
}
ul>li>span:nth-of-type(4) {
background-image: url("images/q4.jpg");
/* Y轴平移到画面的下方,通过-90度的逆时针旋转,让面倒立而且图像与平面平行 */
transform: translateX(-280px) rotateY(-90deg);
}
/* 设置每一个li元素的span所显示的图片位置 */
ul>li:nth-child(2)>span {
/* 让第二个span的水平位移为自身宽度的,可以显示出下一个区域 */
background-position: 0 -100%;
}
ul>li:nth-child(3)>span {
background-position: 0 -200%;
}
ul>li:nth-child(4)>span {
background-position: 0 -300%;
}
.pre,
.next {
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
position: absolute;
top: 50%;
text-decoration: none;
font-size: 40px;
transform: translate(0, -50%);
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
.pre {
left: 0;
}
.next {
right: 0;
}
/* */
</style>
</head>
<body>
<div class="view">
<ul>
<!-- 每一个li就是一个结构块 -->
<li>
<!-- 每一个span是这个结构中的某一个面,span1是第一张图的第一个部分 spn2是第二张图的第一个部分-->
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
<a href="javascript:;" class="pre" onclick=" on()"><</a>
<a href="javascript:;" class="next" onclick=" next()">></a>
</div>
<script>
// 创建图片的索引
var index = 0;
// 添加一个阀门,防止多次点击
var flag = true;
//下一张图片
function next() {
if(flag){
flag = false;
index--;
//获取所有li对象
var li = document.getElementsByTagName("li");
// 通过循环迭代所有li对象,添加新的样式内容
for(var i = 0;i<li.length;i++){
console.log(li)//4*4li
li[i].style.transform = "rotateY("+(index*90)+"deg)";
li[i].style.transitionDelay = (i*0.2)