原生js实现旋转木马效果

原生js实现旋转木马效果

本文实例为大家分享了js实现旋转木马效果的具体代码,供大家参考,具体内容如下

html部分

<div class="wrap" id="wrap">     <div class="slide" id="slide">         <ul>             <li><a href=""><img src="images/slidepic1.webp" alt=""></a></li>             <li><a href=""><img src="images/slidepic2.webp" alt=""></a></li>             <li><a href=""><img src="images/slidepic3.webp" alt=""></a></li>             <li><a href=""><img src="images/slidepic4.webp" alt=""></a></li>             <li><a href=""><img src="images/slidepic5.webp" 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.webp") no-repeat;     z-index: 99; } #next {     background-image: url("../images/next.webp");     right: 0; }

js部分

<script src="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); }

推荐阅读