怎么用javascript实现旋转木马

本篇内容主要讲解“怎么用javascript实现旋转木马”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用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, h2, h2, 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.geputedStyle) {  return window.geputedStyle(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实现旋转木马”有了更深的了解，不妨来实际操作一番吧！这里是主机评测网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

上一篇：怎么高效写Python循环

下一篇：高级语言的特性有哪些

---