您的位置：首页 > Web前端 > CSS

3D幻灯片轮换（CSS3+原生js）

2016-10-13 14:55 197 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background:black;
}
#wrap{
width: 100%;
height: 200px;
margin-top:150px ;
position: relative;/*相对定位   不动的参照物*/
transform-style: preserve-3d;/*类似于一个3D画布*/
perspective: 800px; /*效果近大远小，体现立体感*/
}
#wrap img{
width: 300px;
height: 200px;
position: absolute;/*绝对定位  要动的 ，父元素是他的参照物*/
border-radius: 3px;/*圆角*/
box-shadow: 0 0 5px #0f0;
-webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0,0,0,0) 20%, rgba(0,0,0,.7) 100%);/*reflect：倒影 偏离像素；-webkit-linear-gradient：渐变*/
transition: .8s;/*图片动态轮换的时间*/
}
.left{
transform: rotateY(45deg) translateZ(-100px); /* rotateY ：按Y轴旋转45度；translateZ：3D转换Z轴的值*/
}
.middle{
transform: translateZ(100px);
}
.right{
transform: rotateY(-45deg) translateZ(-100px);
}
</style>
<!--
作者：971331330@qq.com
时间：2016-10-13
描述：img标签里面的style.left 这里的像素需要根据不同的分辨率做调整；本机1600*900；
不同分辨率下，渲染器自动计算出来得数据不一样，会导致点击不到部分图片；
-->
</head>
<body>
<div id="wrap">
<img src="img/1.png" style="left: 300px;" class="left"> <
<img src="img/2.png" style="left: 400px;" class="left"/>
<img src="img/3.png" style="left: 500px;" class="middle"/>
<img src="img/4.png" style="left: 600px;" class="right"/>
<img src="img/5.png" style="left: 700px;" class="right"/>
</div>
<script type="text/javascript">
var wrap = document.getElementById("wrap");
var img = wrap.getElementsByTagName("img");
var mindex = 2;//记录当前位于中间的img小标
for (var i = 0; i < img.length; i++) {
img[i].index = i; //自定义一个属性，点击的的哪个图片
img[i].onclick = function () {
var nindex = this.index;//把当前点击的图片的下标传给nindex
for (var j = 0; j < img.length; j++) {//click事件触发的的改变
img[j].style.left = img[j].offsetLeft - 100*(nindex-mindex) + 'px';  //图片的位移，(nindex-mindex)可正可负，左移右移
if (j < nindex) {//nindex 为当前click的img下标
img[j].className = "left"; //改变样式
}
else if (j > nindex) {
img[j].className = "right";
}
else
{
img[j].className = "middle";
}
}
mindex = nindex;//本次点击后，中间的图片变成当前点击的图片，需要记录下来，作为下次点击的参照
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript css3 3d

相关文章推荐

新的分享

章节导航