您的位置：首页 > Web前端 > JavaScript

无限轮播图

2016-10-29 10:08 113 查看

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>定时器-轮播图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#father{
position: absolute;
/*外层div的宽高应等于图片的宽高*/
width: 308px;
height: 560px;
/*超出部分隐藏*/
overflow: hidden;
}
#son{
/*内层div的宽应>=图片的数量*每一个图片的宽度,如本次图片的宽度308*/
width: 1540px;
height: 560px;
/*定位*/
position: absolute;
left: 0;
top: 0;
}
#son img{
float: left;

width: 308px;
height: 560px;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=4b722eb5d678542777156a2bb811766e"/>
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=68c0bd737be65f1589c7a6f82fb4e480"/>
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=5a5bb411bf1ee3f74a817e6d90858ea8"/>
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=4731e3687f4e7e91644a97f58830ca71"/>
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=4b722eb5d678542777156a2bb811766e"/>
</div>
</div>
</body>
<script type="text/javascript">
//获取4张图片
var imgs = document.querySelectorAll("img");
//获取son这个div
var sonDiv = document.getElementById("son");
var index = 0;//记录移动的距离

//定时器
setInterval(function () {
index++;
//判断边界
if (index == 308 * 4) {
index = 0;
}
//设置移动
sonDiv.style.left = -index + "px";
},5);
</script>

</html>

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

标签： javascript 定时器轮播图

相关文章推荐

新的分享

章节导航