javascript怎么实现旋转木马

javascript实现旋转木马的方法：1、创建好HTML基础代码文件；2、初始化reset；3、通过js代码“function aniMATE(obj, json, fn) { ...} ”方法实现旋转木马效果即可。

本文操作环境：windows7系统、javascript1.8.5版，DELL G3电脑。

javascript怎么实现旋转木马?

JavaScript实现旋转木马轮播图的具体代码，供大家参考，具体内容如下：

html代码段

图片自己添加，或者使用本人的上传照片，拉到最下面即可看见

div class="wrap" id="wrap">
     div class="slide" 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 class="arrow" id="arrow">
      a href="javascript:;
    " class="prev" id="arrLeft">
    /a>
      a href="javascript:;
    " class="next" id="arrRight">
    /a>
     /div>
     /div>
    /div>
    

css代码段：

初始化 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 {
     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;
     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);
}
    

js代码段：

这个是封装好的的js代码，直接引用即可

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

定义onload函数，获取每一个对象，设置鼠标经过事件，鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失；然后.设置图片位置(给对象赋值)

window.onload = function () {
     //alert("外部的JS");
     //找人 var wrap = document.getElementById("wrap");
     var arrow = document.getElementById("arrow");
     var arrLeft = document.getElementById("arrLeft");
     var arrRight = document.getElementById("arrRight");
     var slide = document.getElementById("slide");
     var ul = slide.children[0];
     var lis = ul.children;
//所有图片 //1.鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失 wrap.onmouseover = function () {
 animate(arrow, {
"opacity": 1}
    );
 }
    ;
 wrap.onmouseout = function () {
 animate(arrow, {
"opacity": 0}
    );
 }
    ;
 //2.设置图片位置  var config = [ {
  "width": 400,  "top": 20,  "left": 50,  "opacity": 0.2,  "zIndex": 2 }
,//0 {
  "width": 600,  "top": 70,  "left": 0,  "opacity": 0.8,  "zIndex": 3 }
,//1 {
  "width": 800,  "top": 100,  "left": 200,  "opacity": 1,  "zIndex": 4 }
,//2 {
  width: 600,  top: 70,  left: 600,  opacity: 0.8,  zIndex: 3 }
,//3 {
  "width": 400,  "top": 20,  "left": 750,  "opacity": 0.2,  "zIndex": 2 }
    //4 ];
//其实就是一个配置单 规定了每张图片的大小位置层级透明度  //获取页面上所有的li 让他们从当前的位置 以动画的效果到指定的位置 function assign() {
     for (var i = 0;
     i  lis.length;
 i++) {
  animate(lis[i], config[i], function () {
      flag = true;
//动画执行完成后重新打开阀门  }
    );
 }
 }
      assign();
 //3.点击箭头旋转 //点击右箭头 arrRight.onclick = function () {
 if (flag) {
      flag = false;
    //关闭阀门  //把开始的元素放到最后  config.push(config.shift());
      assign();
 }
 }
    ;
 //点击左箭头 arrLeft.onclick = function () {
 if (flag) {
      flag = false;
      //把最后的元素放到开始  config.unshift(config.pop());
      assign();
 }
  }
    ;
     //4.添加节流阀 var flag = true;
//表示阀门是打开的 }
    ;
    

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

推荐学习：《javascript基础教程》

以上就是javascript怎么实现旋转木马的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！