js实现旋转木马轮播图效果

2023-08-03 07:52:09 165

@charset"UTF-8"; blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{ margin:0; padding:0 } body,button,input,select,textarea{ font:12px/1.5"MicrosoftYaHei","微软雅黑",SimSun,"宋体",sans-serif; color:#666; } ol,ul{ list-style:none } a{ text-decoration:none } fieldset,img{ border:0; vertical-align:top; } a,input,button,select,textarea{ outline:none } a,button{ cursor:pointer } .wrap{ width:1200px; margin:100pxauto; } .slide{ height:500px; position:relative; } .slideli{ position:absolute; left:200px; top:0 } .slideliimg{ width:100% } .arrow{ opacity:0; } .prev,.next{ width:76px; height:112px; position:absolute; top:50%; margin-top:-56px; background:url(../images/prev.png)no-repeat; z-index:99; } .next{ right:0; background-image:url(../images/next.png); }

/** *CreatedbyRENPINGSHENGon2018/4/6. */ functionanimate(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ varflag=true; for(varkinjson){ if(k=="opacity"){ varleader=getStyle(obj,k)*100; vartarget=json[k]*100; varstep=(target-leader)/10; step=step>0?Math.ceil(step):Math.floor(step); leader=leader+step; obj.style[k]=leader/100; }elseif(k=="zIndex"){ obj.style[k]=json[k]; }else{ varleader=parseInt(getStyle(obj,k))||0; vartarget=json[k]; varstep=(target-leader)/10; step=step>0?Math.ceil(step):Math.floor(step); leader=leader+step; obj.style[k]=leader+"px"; } console.log("target:"+target+"leader:"+leader+"step:"+step); if(leader!=target){ flag=false; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },15) } functiongetStyle(obj,attr){ if(obj.currentStyle){ returnobj.currentStyle[attr]; }else{ returnwindow.getComputedStyle(obj,null)[attr]; } }

/** *CreatedbyRENPINGSHENGon2018/4/6. */ window.onload=function(){ varwrap=document.getElementById("wrap"); varslide=document.getElementById("slide"); varul=slide.children[0]; varlis=ul.children; vararrow=document.getElementById("arrow"); vararrRight=document.getElementById("arrRight"); vararrLeft=document.getElementById("arrLeft"); varconfig=[ { width:400, top:20, left:50, opacity:0.2, zIndex:2 }, { width:600, top:70, left:0, opacity:0.8, zIndex:3 }, { width:800, top:100, left:200, opacity:1, zIndex:4 }, { width:600, top:70, left:600, opacity:0.8, zIndex:3 }, { width:400, top:20, left:750, opacity:0.2, zIndex:2 } ]; wrap.onmouseover=function(){ animate(arrow,{"opacity":1}); } wrap.onmouseout=function(){ animate(arrow,{"opacity":0}); } functionassign(){ for(vari=0;i

代码完成后，用浏览器打开网页，效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

js实现旋转木马轮播图效果

热门推荐

随机推荐