<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>simple banner</title>
<style type="text/css">
#container{
width: 300px;
border: 1px solid green;
margin: 100px auto;
overflow: hidden;
}
#box{
position: relative;
width: 1200px;
font-size: 0;
}
.child{
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
display: inline-block;
font-size: 20px;
color: red;
}
</style></head>
<body>
<p id="container">
<p id="box">
<p class="child">pic1</p>
<p class="child">pic2</p>
<p class="child">pic3</p>
<p class="child">pic4</p>
</p></p>
<script type="text/javascript">
var box = document.getElementById('box');
var childs = box.getElementsByClassName('child');
var childwidth = parseInt(childs[0].offsetWidth);
var len = childs.length;
var index = 1;
var timers;
function myanimate(mgleft){
if (parseInt(box.style.marginLeft) < -mgleft*index) {
box.style.marginLeft = -(parseInt(box.style.marginLeft) + 10) + 'px';
setTimeout(function(){
myanimate(childwidth);
}, 100));
};
}
timers = setInterval(function(){
if(index > len){
index = 1;
}
myanimate(childwidth);
index++;
},2000);</script>
</body>
</html>
var childs=box.getElementsByClassName('child');
应该写成var childs = box.children();
补充：dom.style.marginLeft只能取到行内样式如style="margin-left:20px"这样的值。
如果是刚开始学轮播，去看一下慕课网上的这个课程吧 焦点轮播图特效
一两个小时就能掌握，着重学习一下思想。基本思想学会了，自己再优化，或者去使用专门的插件，可以参考这个问题的部分答案 【求助】求一个轮播焦点图的jQuery代码
－－－－－－－
控制台有指示，
Uncaught SyntaxError: Unexpected token )你再点击截图右侧的文档就定位到具体哪一行了……