简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - js做简单轮播图时出现错误，望大神指点。
PHP中文网
PHP中文网 2017-04-10 16:51:02
0
3
651

<!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中文网

认证0级讲师

Antworte allen(3)
阿神
阿神2017-04-10 16:53:02 3 Etage

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

Wie +0
Antwort hinzufügen
小葫芦
小葫芦2017-04-10 16:53:02 2 Etage

补充：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));//多了一个右括号
Wie +0
Antwort hinzufügen
Peter_Zhu
Peter_Zhu2017-04-10 16:53:02 1 Etage

楼上把你的错误说得挺清楚了
我这里就给你一个轮播图的案例好了,我随便在你的代码基础上写了一下，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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！