无限轮播图

最新推荐文章于 2021-03-31 10:58:34 发布

jscyl

最新推荐文章于 2021-03-31 10:58:34 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 定时器轮播图

本文链接：https://blog.youkuaiyun.com/jscyl/article/details/52963049

javascript 专栏收录该内容

4 篇文章

订阅专栏

<!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>