简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

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

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

PHP中文网PHP中文网2772 天前654

全部回覆(3)我來回復

  • 阿神

    阿神2017-04-10 16:53:02

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

    回覆
    0
  • 高洛峰

    高洛峰2017-04-10 16:53:02

    补充：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));//多了一个右括号

    回覆
    0
  • 天蓬老师

    天蓬老师2017-04-10 16:53:02

    楼上把你的错误说得挺清楚了
    我这里就给你一个轮播图的案例好了,我随便在你的代码基础上写了一下，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>
<p id="container">
  <p id="cansee">
    <p id="box">
          <p class="child" style="background-color:blue">pic1</p>
          <p class="child" style="background-color:red">pic2</p>
          <p class="child" style="background-color:black">pic3</p>
          <p class="child" style="background-color:yellow">pic4</p>
    </p>
  </p>
</p>
<script type="text/javascript">
var childs = box.getElementsByTagName("p");
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>

    回覆
    0
  • 取消回覆