您的位置：首页 > 其它

大图滚动

2016-07-11 08:12 141 查看

<!DOCTYPE html>
<html>

<head>
<meta
charset="UTF-8">
<title></title>
<style
type="text/css">
.wrap
{
position:
relative;
width:
200px;
height:
200px;
overflow:
hidden;
}

#middle
{
overflow:
hidden;
position:
absolute;
width:
800px;
top:
0;
left:
0px;
transition:
all 0.5s;
}

#middle>div
{
width:
200px;
height:
200px;
float:
left;
font-size:
50px;
background-color:
#ccc;
text-align: center;
line-height:
200px;
}
</style>
</head>

<body>
<input
type="button"
name="last" id="last"
value="last" />
<input
type="button"
name="next" id="next"
value="next" />
<div
id="control">
<input
type="button"
name="" id=""
value="1" />
<input
type="button"
name="" id=""
value="2" />
<input
type="button"
name="" id=""
value="3" />
<input
type="button"
name="" id=""
value="4" />
</div>
<div
class="wrap">
<div
id="middle">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</div>
</div>

<script
type="text/javascript">
var
oWrap = document.querySelector(".wrap");
var
oMiddle = document.querySelector("#middle");
var
aDiv = document.querySelectorAll("#middle>div");
// offsetLeft 元素距左边的距离，横向的偏移距离
// offsetTop 元素距上边的距离，纵向的偏移距离
// offsetWidth 元素的可见宽度
// offsetHeight 元素的可见高度
//
alert(oWrap.offsetWidth);
// next
var
oNext = document.getElementById("next");
// 让图片向左滚动
var
index = 0;
function
nextFn() {
index++;
if
(index == 4) {
index
= 0;
}
// var index = 4;
// function nextFn() {
// index--;
// if (index == -1) {
// index = 3;
// }
oMiddle.style.left
= -oWrap.offsetWidth * index
+ 'px';
}
oNext.onclick
= function() {
nextFn();
}
setInterval(function() {
nextFn();
}, 2000);
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 大图滚动

相关文章推荐

新的分享

章节导航