问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js做简单轮播图时出现错误，望大神指点。

头像
ruhua
    24833648

    <!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>
    <div id="container">

    <div id="box">
    <div class="child">pic1</div>
    <div class="child">pic2</div>
    <div class="child">pic3</div>
    <div class="child">pic4</div>
</div>

    </div>
    <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>

    javascript
    阅读 3.7k
    3 个回答
    得票最新
    头像
    快智岛
      4923

      var childs=box.getElementsByClassName('child');
      应该写成var childs = box.children();

      头像
      无名小贝勒
        5.7k156280

        补充：dom.style.marginLeft只能取到行内样式如style="margin-left:20px"这样的值。

         if (parseInt(box.style.marginLeft) < -mgleft*index)//这里box.style.marginLeft为空，parseInt(box.style.marginLeft)的结果是NaN，if判断结果一直为假，所以函数相当于没执行

        如果是刚开始学轮播，去看一下慕课网上的这个课程吧 焦点轮播图特效
        一两个小时就能掌握，着重学习一下思想。基本思想学会了，自己再优化，或者去使用专门的插件，可以参考这个问题的部分答案 【求助】求一个轮播焦点图的jQuery代码
        －－－－－－－

        图片描述
        控制台有指示，Uncaught SyntaxError: Unexpected token )
        你再点击截图右侧的文档就定位到具体哪一行了……

        setTimeout(function(){
    myanimate(childwidth);
}, 100));//多了一个右括号
        头像
        小深刻的秋鼠
          30124

          楼上把你的错误说得挺清楚了
          我这里就给你一个轮播图的案例好了,我随便在你的代码基础上写了一下，js代码不多，也很好理解，用了css3的属性，题主可以看看实现思路

          <!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;*/
}

#cansee{
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
    /*font-size: 0;*/
}

#box{
  position: absolute;
  width: 1200px;
  left: 0;
  -webkit-transition: left 0.8s ease-in-out;
  -o-transition: left 0.8s ease-in-out;
  transition: left 0.8s ease-in-out;
}
.child{
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    font-size: 20px;
    color: white;
    float: left;
}
</style>
</head>
<body>
<div id="container">
  <div id="cansee">
    <div id="box">
          <div class="child" style="background-color:blue">pic1</div>
          <div class="child" style="background-color:red">pic2</div>
          <div class="child" style="background-color:black">pic3</div>
          <div class="child" style="background-color:yellow">pic4</div>
    </div>
  </div>
</div>
<script type="text/javascript">
var childs = box.getElementsByTagName("div");
var childwidth = parseInt(childs[0].offsetWidth);
var len = childs.length;
var index = 1;
var timers=setInterval(slide,2000);
function slide(){
    box.style.left=childwidth*(-1)*index+'px';
    index++;
    if(index==len){
      index=0;
    }
}
</script>
</body>
</html>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题