一般轮播写得很熟了, 遇到这种用得不多, 但偶尔会用到的轮播, 虽然是普通轮播的扩展, 但也花了好几个小时才实现. 哎, 数学还是有点欠缺的...
操作: 左右拖动, 或点击左右图片进行切换.
优点: 无需额外生成元素. 有点 3d 的意思.
缺点: 多元素操作, 性能比一般轮播差一点, 不太适合图片较多的轮播....
只实现了效果, 代码未做最终优化...
html 代码
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <meta name="Keywords" content="" />
- <meta name="Description" content="" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta content="telephone=no" name="format-detection" />
- <meta content="email=no" name="format-detection" />
- <title>Document</title>
- <style>
- div{position:relative;width:40%;height:20vw;border:1px solid #CCC;margin:2em auto;overflow:hidden;-webkit-user-select:none;user-select:none;}
- ul{position:absolute;list-style-type:none;left:15%;top:0;width:70%;height:100%;margin:0;padding:0;}
- li{position:absolute;left:0;top:0;width:100%;height:100%;background:none no-repeat 50% 50%;background-size:cover;}
- .anim{-webkit-transition:all .5s;transition:all .5s;}
- </style>
- </head>
- <body>
- <div>
- <ul>
- <li style="background-image:url('http://img.woyaogexing.com/2016/08/23/b9e46c9deb29ccfd!600x600.jpg')"></li>
- <li style="background-image:url('http://img.woyaogexing.com/2016/08/23/34b06d56a03b7dc1!600x600.jpg')"></li>
- <li style="background-image:url('http://img.woyaogexing.com/2016/08/23/e012493e82c863c4!600x600.jpg')"></li>
- <li style="background-image:url('http://img.woyaogexing.com/2016/08/16/01e01c281ef6386d!600x600.jpg')"></li>
- <li style="background-image:url('http://img.woyaogexing.com/2016/08/16/9ecb48f95b053004!600x600.jpg')"></li>
- </ul>
- </div>
- <script>
- (function(){
- var ul=document.querySelector("ul");
- var obj={
- _idx:0,
- _setPos:function(li,px,isSave){
- var scale=Math.abs(Math.cos(px*0.6));
- if(isSave)
- {
- if(Math.abs(li._pos)+Math.abs(px)===this._len-1)
- {
- li.classList.remove("anim");
- }
- li._pos=px;
- }
- li.style.webkitTransform=li.style.transform="translateX("+px*100+"%) scale("+scale+") translateZ(0)";
- li.style.opacity=scale;
- },
- pos:function(){
- var lis=this._lis,len=lis.length,i=0,idx=this._idx,key;
- while(i<len)
- {
- key=(idx+i)%len;
- this._setPos(lis[key],i<len/2?i:i-len,true);
- i++;
- }
- return len;
- },
- _anim:function(bl){
- var lis=this._lis,i=this._len;
- while(i--)
- {
- lis[i].classList[bl?"add":"remove"]("anim");
- }
- },
- mousedown:function(e){
- this._isDown=true;
- this._ox=e.clientX;
- this._ow=e.currentTarget.clientWidth;
- this._anim(false);
- },
- mousemove:function(e){
- if(!this._isDown)return;
- var offsetX=e.clientX-this._ox,lis=this._lis,i=this._len;
- while(i--)
- {
- this._setPos(lis[i],lis[i]._pos+(offsetX/this._ow),false);
- }
- },
- mouseup:function(e){
- if(!this._isDown)return;
- var offsetX=e.clientX-this._ox,idx;
- this._isDown=false;
- if(Math.abs(offsetX)>5)
- {
- idx=this._idx;
- idx+=(offsetX-0.5>>31)*-2-1;
- idx=(idx+this._len)%this._len;
- this._idx=idx;
- }
- else if(e.target.tagName==="LI"&&e.target._idx!==this._idx)
- {
- this._idx=e.target._idx;
- }
- this._anim(true);
- this.pos();
- },
- handleEvent:function(e){
- this[e.type](e);
- },
- init:function(ul){
- var lis=ul.children,i;
- this.mouseleave=this.mouseup;
- this._lis=[].slice.call(lis);
- this._len=i=this.pos();
- while(i--)
- {
- lis[i]._idx=i;
- }
- ul.addEventListener("mousedown",this,false);
- ul.addEventListener("mousemove",this,false);
- ul.addEventListener("mouseup",this,false);
- ul.addEventListener("mouseleave",this,false);
- }
- };
- obj.init(ul);
- })();
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/11445/585d3173e8e9ad251dfd6439dfed02b4.html