使用按钮移动div
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box,
#box1 {
position: absolute;
width: 100px;
height: 100px;
background: #000000;
left: 8px;
}
#box1 {
position: absolute;
top: 150px;
}
</style>
<!-- 导入js方法 -->
<script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p>
<button type="button">走</button>
<button type="button">回来</button>
</p>
<div id="box"></div>
<div id="box1"></div>
<script type="text/javascript">
var obtn = document.getElementsByTagName('button')[0];
var obox = document.getElementById('box');
var obtn1 = document.getElementsByTagName('button')[1];
// 点击按钮调用js中的move()方法
obtn.onclick = function() {
move(obox, 800, 10, 'left', function() {
move(obox, 400, 10, 'top')
});
}
obtn1.onclick = function() {
move(obox, 8, 10, 'left');
}
</script>
</body>
</html>
定时器制作的轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background: #7B7B7B;
font-size: 0;
}
h3 {
margin: 0;
}
#box {
width: 600px;
height: 399px;
border: #fff 10px solid;
margin: 48px auto;
/* overflow: hidden; */
position: relative;
}
#img {
width: 3600px;
height: 100%;
position: absolute;
left: 0;
}
#text {
width: 600px;
position: absolute;
top: 399px;
font-size: 14px;
color: #FFFFFF;
}
#text div {
position: absolute;
top: 0px;
background: #000000;
opacity: 0.6;
padding: 5px;
}
</style>
<script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
var oImg = document.getElementById('img');
var oText = document.getElementById('text');
var aDiv = oText.getElementsByTagName('div');
var num = 0;
// 引入第一集描述文字
move(aDiv[num], -70, 10, 'top');
var timer = setInterval(function() {
// 收起上集文字
move(aDiv[num], 0, 10, 'top', function() {
// 自增
num++;
if (num == 6) {
num = 1;
oImg.style.left = 0;
}
// 移动下张图片
move(oImg, -600 * num, 40, 'left');
// 移动下张文字
move(aDiv[num], -70, 10, 'top');
});
}, 2000)
}
</script>
</head>
<body>
<div id="box">
<div id="img">
<img src="img/练习3/pic1.jpg">
<img src="img/练习3/pic2.jpg">
<img src="img/练习3/pic3.jpg">
<img src="img/练习3/pic4.jpg">
<img src="img/练习3/pic5.jpg">
<img src="img/练习3/pic1.jpg">
</div>
<div id="text">
<div id="">
<h3>离婚律师 第一季</h3>
啊大声大声道撒啊的撒 暗暗地aS的ad撒的撒asdsd
撒旦萨达斯DSA AS打算AaS的a阿瑟das的aD是打算
</div>
<div id="">
<h3>离婚律师 第二级</h3>
啊大声大声道撒啊的撒 暗暗地aS的ad撒的撒asdsd
撒旦萨达斯DSA AS打算AaS的a阿瑟das的aD是打算
</div>
<div id="">
<h3>离婚律师 第三集</h3>
啊大声大声道撒啊的撒 暗暗地aS的ad撒的撒asdsd
撒旦萨达斯DSA AS打算AaS的a阿瑟das的aD是打算
</div>
<div id="">
<h3>离婚律师 第四集</h3>
啊大声大声道撒啊的撒 暗暗地aS的ad撒的撒asdsd
撒旦萨达斯DSA AS打算AaS的a阿瑟das的aD是打算
</div>
<div id="">
<h3>离婚律师 第五集</h3>
啊大声大声道撒啊的撒 暗暗地aS的ad撒的撒asdsd
撒旦萨达斯DSA AS打算AaS的a阿瑟das的aD是打算
</div>
<div id="">
<h3>离婚律师 第一季</h3>
啊大声大声道撒啊的撒 暗暗地aS的ad撒的撒asdsd
撒旦萨达斯DSA AS打算AaS的a阿瑟das的aD是打算
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
myjsp
//步长的正负，方向 step
// 判断条件
// 目标位置不一样 target
// 移动元素不一样 obj
//回调函数 endFn
// 清楚定时器防止迭代
clearInterval(obj.timer);
// 获取box的left值并且取整数
var speed = parseInt(getStyle(obj, dir));
// 判断step的正负
step=speed<target?step:-step;
obj.timer = setInterval(function() {
speed = speed + step;
// 判断位置到没到目标点,判断根据step判断断正负
if (speed >=target && step > 0||speed <=target && step < 0 ) {
speed = target;
clearInterval(obj.timer);
endfn && endfn();
}
obj.style[dir] = speed + 'px';
}, 50)
}
// 清楚定时器防止迭代
// clearInterval(obox.timer);
// obox.timer = setInterval(function() {
// var speed = parseInt(getStyle(obox, 'left'))
// speed = speed + 10;
// if (speed >= 800) {
// speed = 800;
// clearInterval(obox.timer);
// }
// obox.style.left = speed + 'px';
// }, 50)
function getStyle(obj, attr) {
return getComputedStyle(obj)[attr];
}
网友评论