---恢復內容開始---
大家還記得我昨天的3D拖拽立方體嗎??我昨天還說過css還可以做輪播圖,所以咱們今天就寫一下,css的輪播圖吧!
....這個輪播圖主要是用CSS3里的transform的旋轉屬性來完成3D效果的,然后配合原生js的顯示隱藏,達到了3D旋轉輪播圖的效果:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3D圖片切換1</title>
<style>
/*設置一個關鍵幀*/
@-webkit-keyframes open {
0% {
-webkit-transform: rotateX(180deg);
opacity: 0;
}
57% {
-webkit-transform: rotateX(-16deg);
opacity: 1;
}
66% {
-webkit-transform: rotateX(14deg);
}
74% {
-webkit-transform: rotateX(-12deg);
}
81% {
-webkit-transform: rotateX(10deg);
}
87% {
-webkit-transform: rotateX(-8deg);
}
92% {
-webkit-transform: rotateX(6deg);
}
96% {
-webkit-transform: rotateX(-4deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
@-webkit-keyframes clos {
0% {
-webkit-transform: rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: rotateX(-180deg);
opacity: 0;
}
}
body {
background: #eee;
}
.box {
width: 600px;
height: 400px;
position: relative;
margin: 30px auto;
}
/*按鈕*/
#prev,
#next {
width: 50px;
height: 50px;
background: #efefef;
border-radius: 25px;
position: absolute;
top: 100px;
box-shadow: 2px 2px 10px #666;
text-align: center;
font-size: 40px;
line-height: 50px;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #fff;
-webkit-text-stroke: 2px #ccc;
}
#prev {
left: -100px;
}
#next {
right: -100px;
}
/*圖片區*/
#imgs {
width: 600px;
height: 400px;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000px;
}
/*圖片*/
#imgs img {
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
-webkit-transform-origin: bottom;
-webkit-transform: rotateX(-180deg);
opacity: 0;
}
/*設置顯示和隱藏后的樣式*/
#imgs .show {
-webkit-animation: open 1.2s ease-in;
-webkit-transform: rotateX(0deg);
opacity: 1;
}
#imgs .hide {
-webkit-animation: clos 1s ease;
-webkit-transform: rotateX(-180deg);
opacity: 0;
}
</style>
<script>
window.onload = function() {
//要用到的元素獲取元素
var oPrev = document.getElementById("prev");
var oNext = document.getElementById("next");
var aImg = document.getElementsByTagName("img");
var iNow = 0;
//上一頁點擊事件
oPrev.onclick = function() {
aImg[iNow].className = "hide";
iNow--;
if(iNow < 0) {
//判斷全局變量
iNow = aImg.length - 1;
}
aImg[iNow].className = "show";
};
//下一頁點擊事件
oNext.onclick = function() {
aImg[iNow].className = "hide";
iNow++;
if(iNow == aImg.length) {
// 如果全局變量和長度相等,就變回第一張,造成視覺循環的假象
iNow = 0;
}
aImg[iNow].className = "show";
};
}
</script>
</head>
<body>
<div class="box">
<!--上一頁-->
<a href="#" id="prev"><</a>
<div id="imgs">
<img src="img/img1.jpg" alt="" class="show" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
<img src="img/img4.jpg" alt="" />
<img src="img/img5.jpg" alt="" />
</div>
<!--下一頁-->
<a href="#" id="next">></a>
</div>
</body>
</html>
不知道你們學會了嗎???很簡單哦!
---恢復內容結束---