项目目录结构:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="styleSheet" href="css/wrap.css" />
</head>
<body οnlοad="setInterval('go()',5000)">
<audio autoplay="autoplay" loop="loop" hidden="hidden" >
<source src="media/最美的期待.mp3" type="audio/mpeg" />
</audio>
<div class="wrap">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
</div>
<script>
var oimg = document.getElementsByTagName('img')
var iNow = 0;
var iTarget = 0;
//给七张图片排位置 07 06 01 02 03 04 05
tab(0)
function tab(n){
for(var i = 0; i < 3; i++){
var left = n-1-i
if(left<0){
left = left+7;
}
oimg[left].style.transform = `translateX(${-150*(i+1)}px) translateZ(${200-i*100}px) rotateY(30deg)`
var right = n+1+i
if(right>6){
right = right-7;
}
oimg[right].style.transform = `translateX(${150*(i+1)}px) translateZ(${200-i*100}px) rotateY(-30deg)`
}
oimg[n].style.transform = `translateZ(${250}px)`
}
var middle = 0;
var num = 0;
//给每张图片添加点击事件
for(var i = 0; i < oimg.length; i++){
oimg[i].index = i;
oimg[i].onclick = function(ev){
//中线的位置
middle = document.documentElement.clientWidth/2;
//获取鼠标到达屏幕左边的水平距离
num = ev.clientX;
iTarget = this.index;
if(middle<num) //鼠标在右边
{
goNext()
}else{
goPrev()
}
}
}
function go(){
iTarget = parseInt(10*Math.random())
goNext()
}
function goNext(){
if(iTarget == iNow)
{
return;
}
iNow++
if(iNow>6){
iNow = 0;
}
tab(iNow)
//设置延时 递归调用
setTimeout(function(){
goNext()
},800)
}
function goPrev(){
if(iTarget == iNow)
{
return;
}
iNow--
console.log(iNow)
if(iNow<0){
iNow = 6;
}
tab(iNow)
//设置延时 递归调用
setTimeout(function(){
goPrev()
},800)
}
</script>
</body>
</html>
css样式代码:
html,body{
height: 100%;
width: 100%;
margin: 0;
}
.wrap{
height: 100%;
width: 100%;
margin:0 ;
padding: 0;
background: url(../img/snow.png) no-repeat;
background-size: 100%;
background-attachment: fixed;
position: relative;
/**
* 定义一个3d空间
*/
transform-style: preserve-3d;
perspective: 800px;
}
.wrap img{
width: 200px;
height: 320px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -130px;
margin-top: -150px;
transition: 1s;
}
小结:对于前端,只能抱着玩玩的态度,不想深入研究...太伤脑子了,啊哈哈哈哈。觉得css这块学的还是不是很好,还是需要继续努力学习啊。