JavaScript实现旋转木马轮播图

2023-07-28 14:39:13 303

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; position:absolute; top:50%; z-index:1000; width:100%; } .prev,.next{ width:76px; height:112px; position:absolute; z-index:99; } .prev{ left:0; background:url(../images/prev.png)no-repeat; } .next{ right:0; background-image:url(../images/next.png); }

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.zIndex=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"; } if(leader!=target){ flag=false; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },15); } functiongetStyle(obj,attr){ if(window.getComputedStyle){ returnwindow.getComputedStyle(obj,null)[attr]; }else{ returnobj.currentStyle[attr]; } }

本人刚刚开始入行前端，希望大佬有什么意见的话，欢迎给我留言，你们的支持就是我最大的动力

精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播

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

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

JavaScript实现旋转木马轮播图

热门推荐

随机推荐