千家信息网

怎么用javascript实现旋转木马

发表于:2025-01-22 作者:千家信息网编辑
千家信息网最后更新 2025年01月22日,本篇内容主要讲解"怎么用javascript实现旋转木马",感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习"怎么用javascript实现旋转木马"吧!java
千家信息网最后更新 2025年01月22日怎么用javascript实现旋转木马

本篇内容主要讲解"怎么用javascript实现旋转木马",感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习"怎么用javascript实现旋转木马"吧!

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

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

javascript怎么实现旋转木马?

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

html代码段

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

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实现旋转木马"有了更深的了解,不妨来实际操作一番吧!这里是网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

0