轮播图
轮播图.gif
主要代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type='text/css'>
*{
padding: 0px;
margin: 0px;
}
#photos{
width: 530px;
height:300px;
margin: 100px 0 0 200px;
}
.button_container {
width: 530px;
height:300px;
position: absolute;
top: 0px;
margin: 100px 0 0 200px;
z-index: 100;
}
img{
width: 530px;
height: 300px;
position: absolute;
border-radius: 10px;
z-index: 0;
}
.prev_button {
float: left;
height: 69px;
width: 41px;
margin-top: 120px;
background: url('./images/icon-slides.png') no-repeat;
background-position: -84px 50%;
}
.prev_button:hover {
background-position:0 50%;
}
.next_button {
float: right;
height: 69px;
width: 41px;
margin-top: 120px;
background: url('./images/icon-slides.png') no-repeat;
background-position: -125px 50%;
}
.next_button:hover {
background-position:-42px 50%;
}
</style>
</head>
<body>
<div class="container">
<div id="photos">
<img id="pic0" src="./images/150713416389.jpg" alt="">
<img id="pic1" src="./images/150719519140.jpg" alt="">
<img id="pic2" src="./images/150719602492.jpg" alt="">
<img id="pic3" src="./images/1506434387826.jpg" alt="">
<img id="pic4" src="./images/1507133690232.jpg" alt="">
<img id="pic5" src="./images/1507133807172.jpg" alt="">
</div>
<div class="button_container">
<div class="prev_button"></div>
<div class="next_button"></div>
</div>
</div>
<script>
var index = 0;
var photos_num = document.getElementsByTagName("img").length;
document.getElementsByClassName('prev_button')[0].onclick = function () {
document.getElementById('pic' + index).style = 'z-index: 0';
index ++;
if (index == photos_num) index = 0;
document.getElementById('pic' + index).style = 'z-index: 50';
}
document.getElementsByClassName('next_button')[0].onclick = function () {
document.getElementById('pic' + index).style = 'z-index: 0';
index --;
if (index == -1) index = photos_num - 1;
document.getElementById('pic' + index).style = 'z-index: 50';
}
</script>
</body>
</html>
github地址：https://github.com/zheever/circle_album/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE
3D轮播图
参考：https://juejin.im/post/5aeafb0f6fb9a07ac76ea983
3D轮播图.gif
主要代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type='text/css'>
*{
padding: 0px;
margin: 0px;
}
.container{
perspective: 1600px;
-webkit-perspective: 1600px;
}
#photos{
width: 339px;
height:300px;
margin: 200px 500px;
transform-style: preserve-3d;
transition: all .5s ease;
-webkit-transform-style: preserve-3d;
-webkit-transition: all .5s ease;
}
.button_container {
width: 339px;
height:300px;
position: absolute;
top: 0px;
margin: 0 500px;
transform : translateZ(300px);
-webkit-transform : translateZ(300px);
}
img{
width: 339px;
height: 300px;
position: absolute;
border-radius: 10px;
}
.prev_button {
float: left;
height: 69px;
width: 41px;
margin-top: 120px;
background: url('./images/icon-slides.png') no-repeat;
background-position: -84px 50%;
}
.prev_button:hover {
background-position:0 50%;
}
.next_button {
float: right;
height: 69px;
width: 41px;
margin-top: 120px;
background: url('./images/icon-slides.png') no-repeat;
background-position: -125px 50%;
}
.next_button:hover {
background-position:-42px 50%;
}
</style>
</head>
<body>
<div class="container">
<div id="photos">
<img class="pic1" src="./images/150713416389.jpg" alt="">
<img class="pic2" src="./images/150719519140.jpg" alt="">
<img class="pic3" src="./images/150719602492.jpg" alt="">
<img class="pic4" src="./images/1506434387826.jpg" alt="">
<img class="pic5" src="./images/1507133690232.jpg" alt="">
<img class="pic6" src="./images/1507133807172.jpg" alt="">
</div>
<div class="button_container">
<div class="prev_button"></div>
<div class="next_button"></div>
</div>
</div>
<script>
var photos_container = document.getElementById("photos");
var photos_list = photos_container.getElementsByTagName("img");
var photos_num = photos_list.length;
var ang = Math.floor(360 / photos_num);
for(var i = 0; i < photos_num; i++){
photos_list[i].style = 'transform : rotateY(' + ang*i + 'deg) translateZ(300px) ';
}
var rotate_deg = 0;
document.getElementsByClassName('prev_button')[0].onclick = function () {
rotate_deg += ang;
photos_container.style = 'transform : rotateY(' + rotate_deg + 'deg)';
}
document.getElementsByClassName('next_button')[0].onclick = function () {
rotate_deg -= ang;
photos_container.style = 'transform : rotateY(' + rotate_deg + 'deg)';
}
</script>
</body>
</html>
设置perspective属性
.container{
perspective: 1600px;
-webkit-perspective: 1600px;
}
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
把图片旋转60度，再在Z轴上偏移300px，形成立体的六边形
var photos_container = document.getElementById("photos");
var photos_list = photos_container.getElementsByTagName("img");
var photos_num = photos_list.length;
var ang = Math.floor(360 / photos_num);
for(var i = 0; i < photos_num; i++){
photos_list[i].style = 'transform : rotateY(' + ang*i + 'deg) translateZ(300px) ';
}
点击按钮时向右或者向左旋转60度
var rotate_deg = 0;
document.getElementsByClassName('prev_button')[0].onclick = function () {
rotate_deg += ang;
photos_container.style = 'transform : rotateY(' + rotate_deg + 'deg)';
}
document.getElementsByClassName('next_button')[0].onclick = function () {
rotate_deg -= ang;
photos_container.style = 'transform : rotateY(' + rotate_deg + 'deg)';
}
github地址：https://github.com/zheever/circle_album/tree/master/3D%E8%BD%AE%E6%92%AD%E5%9B%BE
网友评论