本篇内容主要讲解“怎么用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, 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实现旋转木马”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
