当前位置： 移动技术网 > IT编程>开发语言>Jquery > 旋转图片轮播

旋转图片轮播

2018年08月19日  | 移动技术网IT编程  | 我要评论

2018-08-18

话不多说，直接上代码

 

html:

<div id="perspective">
<div id='wrap'>
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<img src="images/tingjie.jpg" />
<p></p>
</div>
</div>

css:

<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
background: #000;
overflow: hidden;
}

#perspective {
perspective: 800px;
}

#wrap {
width: 120px;
/*133:200 4:6 */
height: 180px;
margin: 0 auto;
position: relative;
/*搭建3d效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/
transform-style: preserve-3d;
transform: rotatex(-10deg) rotatey(0deg);
}

#wrap img {
width: 100%;
height: 100%;
position: absolute;
border-radius: 5px;
/*加上圆角*/
box-shadow: 0px 0px 10px #fff;
/*box-shadow 属性向框添加一个或多个阴影*/
-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
}

#wrap p {
width: 1200px;
height: 1200px;
background: -webkit-radial-gradient(center center, 600px 600px, rgba(244, 23, 234, 0.2), rgba(0, 0, 0, 0));
border-radius: 100%;
position: absolute;
left: 50%;
top: 102%;
margin-left: -600px;
margin-top: -600px;
transform: rotatex(90deg);
}
</style>

js:

<script type="text/javascript">
window.onload = function() {
var owrap = document.getelementbyid('wrap');
var oimg = owrap.getelementsbytagname('img');
var oimglength = oimg.length;
var deg = 360 / oimglength;
var nowx, nowy, lastx, lasty, minusx = 0,
minusy = 0;
var roy = 0,
rox = -10;
var timer;

for(var i = 0; i < oimglength; i++) {
oimg[i].style.transform = 'rotatey(' + i * deg + 'deg) translatez(350px)';
oimg[i].style.transition = 'transform 1s ' + (oimglength - 1 - i) * 0.1 + 's';

}

mtop();

window.onresize = mtop;

function mtop() {
var wh = document.documentelement.clientheight;
owrap.style.margintop = wh / 2 - 180 + 'px';
}

// 拖拽：三个事件-按下 移动 抬起
//按下
document.onmousedown = function(ev) {
ev = ev || window.event;

//鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
lastx = ev.clientx;
lasty = ev.clienty;

//移动
this.onmousemove = function(ev) {
ev = ev || window.event;

clearinterval(timer);

nowx = ev.clientx; // clientx 鼠标距离页面左边的距离
nowy = ev.clienty; // clienty ………………………………顶部………………

//当前坐标和前一点坐标差值
minusx = nowx - lastx;
minusy = nowy - lasty;

//更新wrap的旋转角度，拖拽越快-> minus变化大 -> roy变化大 -> 旋转快
roy += minusx * 0.2; // roy = roy + minusx*0.2;
rox -= minusy * 0.1;

owrap.style.transform = 'rotatex(' + rox + 'deg) rotatey(' + roy + 'deg)';

/*
//生成div，让div跟着鼠标动
var odiv = document.createelement('div');
odiv.style.csstext = 'width:5px;height:5px;background:red;position:fixed;left:'+nowx+'px;top:'+nowy+'px';
this.body.appendchild(odiv);
*/

//前一点的坐标
lastx = nowx;
lasty = nowy;

}
//抬起
this.onmouseup = function() {
this.onmousemove = null;
timer = setinterval(function() {
minusx *= 0.95;
minusy *= 0.95;
roy += minusx * 0.2; // roy = roy + minusx*0.2;
rox -= minusy * 0.1;
owrap.style.transform = 'rotatex(' + rox + 'deg) rotatey(' + roy + 'deg)';

if(math.abs(minusx) < 0.1 && math.abs(minusy) < 0.1) {
clearinterval(timer);
}
console.log(minusx);
}, 13);
}
return false;
}
}
</script>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网