189 8069 5689

css代码段：

初始化 reset

blockquote, body, button, dd, dl, dt, fieldset, form, h2, h3, h4, h5, h6, h7, 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实现旋转木马”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！