js如何实现木马轮播图效果

互联网 20-3-24

首先，我们来看一下木马轮播图效果：

（推荐教程：js教程）

html部分代码：

<!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>旋转木马轮播图</title>  <link rel="stylesheet" href="css/myStyle.css" rel="external nofollow" />  <script type="text/javascript" src="js/animate.js"></script>  <script type="text/javascript" src="js/my.js"></script> </head> <body> <div id="wrap">  <div id="slide">   <ul>    <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>    <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>    <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>    <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>    <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>   </ul>   <div id="arrow">    <a href="javascript:;" id="arrLeft"></a>    <a href="javascript:;" id="arrRight"></a>   </div>  </div> </div> </body> </html>

在html部分引入的myStyle.css文件部分代码

@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 "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{  width:1200px;  margin:100px auto; } .slide{  height:500px;  position: relative; }   .slide li{  position:absolute;  left:200px;  top:0 }   .slide li img{  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); }

在html部分引入的animate.js文件部分代码

/**  * Created by RENPINGSHENG on 2018/4/6.  */   function animate(obj,json,fn) {  clearInterval(obj.timer);  obj.timer = setInterval(function () {   var flag = true;   for(var k in json){    if( k == "opacity"){     var leader = getStyle(obj,k) * 100;     var target = json[k] * 100;     var step = (target - leader) /10;     step = step > 0 ? Math.ceil(step) : Math.floor(step);     leader = leader + step;     obj.style[k] = leader /100;    } else if ( k == "zIndex"){     obj.style[k] = json[k];    }else{     var leader = parseInt(getStyle(obj,k)) || 0;     var target = json[k];     var step = (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) }   function getStyle(obj,attr){  if (obj.currentStyle){   return obj.currentStyle[attr];  }else{   return window.getComputedStyle(obj,null)[attr];  } }

在html部分引入的my.js文件部分代码

/**  * Created by RENPINGSHENG on 2018/4/6.  */     window.onload = function () {  var wrap = document.getElementById("wrap");  var slide = document.getElementById("slide");  var ul = slide.children[0];  var lis = ul.children;  var arrow = document.getElementById("arrow");  var arrRight = document.getElementById("arrRight");  var arrLeft = document.getElementById("arrLeft");    var config = [   {    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});  }  function assign() {   for(var i = 0;i < lis.length;i++){    animate(lis[i],config[i],function(){     flag = true;    })   }  }    var flag = true;  assign();  arrRight.onclick = function () {   flag = false;   config.push(config.shift());   assign();  };  arrLeft.onclick = function () {   flag = false;   config.unshift(config.pop());   assign();  } }

整个页面的文件结构如下图所示：