本文实例为大家分享了js实现旋转木马效果的具体代码,供大家参考,具体内容如下
html部分
<div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href=""><img src="https://www.atool.online/article/images/slidepic1.jpg" alt=""></a></li> <li><a href=""><img src="https://www.atool.online/article/images/slidepic2.jpg" alt=""></a></li> <li><a href=""><img src="https://www.atool.online/article/images/slidepic3.jpg" alt=""></a></li> <li><a href=""><img src="https://www.atool.online/article/images/slidepic4.jpg" alt=""></a></li> <li><a href=""><img src="https://www.atool.online/article/images/slidepic5.jpg" alt=""></a></li> </ul> <div class="arrow" id="arrow"> <a href="javascript:" id="next"></a> <a href="javascript:" id="prev"></a> </div> </div> </div>
css部分
@charset "UTF-8"; /*初始化 reset*/ 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 "Microsoft YaHei", "微软雅黑", 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 { margin: 100px auto; width: 1200px; } .slide { height: 500px; position: relative; } .slide li { position: absolute; left: 200px; top: 0; } .slide li img { width: 100%; } .arrow { opacity: 0; } #next,#prev { width: 76px; height: 112px; position: absolute; top: 50%; margin-top: -56px; background: url("../images/prev.png") no-repeat; z-index: 99; } #next { background-image: url("../images/next.png"); right: 0; }
js部分
<script src="https://www.atool.online/article/common.js"></script> <script> var config = [ { width: 400, opacity: 0.2, height: 250, left: 50, top: 20, zIndex: 2 },//0 { width: 600, opacity: 0.7, height: 350, left: 0, top: 70, zIndex: 3 },//1 { width: 800, opacity: 1, height: 500, left: 200, top: 100, zIndex: 4 },//2 { width: 600, opacity: 0.7, height: 350, left: 600, top: 70, zIndex: 3 },//3 { width: 400, opacity: 0.2, height: 250, left: 750, top: 20, zIndex: 2 }//4 ]; //页面加载事件 window.onload = function () { var flag=true;//默认所有的动画都结束了 //获取li标签 var list = my$("slide").getElementsByTagName("li"); //散开图片 function assign() { for (var i = 0; i < list.length; i++) { animate(list[i], config[i],function () { flag=true;//回调函数,当动画加载完后,flag变为true }); } } assign(); //点击右边焦点 my$("next").onclick = function () { if (flag){ flag=false; config.push(config.shift());//把数组中的第一个元素作为返回值并追加加到这个数组的最后面 assign(); } }; //点击左边焦点 my$("prev").onclick = function () { if (flag){ flag=false; config.unshift(config.pop());//把数组的最后一个元素作为返回值并追加到这个数组的最前面 assign(); } }; //鼠标进入逐渐的显示左右焦点 my$("slide").onmouseover=function () { animate(my$("arrow"),{"opacity":1}); }; //鼠标离开隐藏 my$("slide").onmouseout = function () { animate(my$("arrow"),{"opacity":0}); }; }; </script>
common.js部分
//根据id获取元素对象 function my$(id) { return document.getElementById(id); } /* * element---任意的元素 * attr---属性 * */ function getAttrValue(element,attr) { return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0; } //动画函数 function animate(element,json,fn) { clearInterval(element.timeId); element.timeId=setInterval(function () { var flag=true;//假设都达到了目标 for(var attr in json){ if(attr=="opacity"){//判断属性是不是opacity var current= getAttrValue(element,attr)*100; //每次移动多少步 var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改 var step=(target-current)/10;//(目标-当前)/10 step=step>0?Math.ceil(step):Math.floor(step); current=current+step; element.style[attr]=current/100; }else if(attr=="zIndex"){//判断属性是不是zIndex element.style[attr]=json[attr]; }else{//普通的属性 //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型 var current= parseInt(getAttrValue(element,attr))||0; //每次移动多少步 var target=json[attr];//直接赋值给一个变量,后面的代码都不用改 var step=(target-current)/10;//(目标-当前)/10 step=step>0?Math.ceil(step):Math.floor(step); current=current+step; element.style[attr]=current+"px"; } if(current!=target){ flag=false;//如果没到目标结果就为false } } if(flag){//结果为true clearInterval(element.timeId); if(fn){//如果用户传入了回调的函数 fn(); //就直接的调用, } } console.log("target:"+target+"current:"+current+"step:"+step); },10); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。