原生js旋转木马

最新推荐文章于 2024-07-15 18:00:00 发布

web加加

最新推荐文章于 2024-07-15 18:00:00 发布

阅读量710

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_38892819/article/details/77376472

版权

javascript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>

<style>

@charset "UTF-8";
/*初始化 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);
}

</style>

</head>
<body>
<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>

// 动画效果
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)[attr];
} else {
return obj.currentStyle[attr];
}
}