圆点切换图片与轮播的顺序不连接

来源：3-7 点击圆点切换图片（2）

itstimetosail

2018-11-08 15:02:14

<!DOCTYPE html>
<html>
<head>
  <title>JScarousel</title>
  <meta charset="UTF-8">
<!--
  <link rel="stylesheet" type="text/css" href="../CSSstylesheet/css.css">
  <script type="text/javascript" src="../JSjavascript/js.script"></script>
-->
<style type="text/css">
*{
  margin:0;
}
body{
  background-image:url(image/img5.jpg);
  background-size:100%;
}
.shade{
  margin:0;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.75);
}
.banner{
  width:720px;
  height:470px;
  overflow:hidden;
  margin:70px auto 0px auto;
}
.img{
  width:720px;
  height:470px;
  background-size:100% 100%;
  float:left;
  }
#img1{
  background-image:url(image/img1.jpg);
}
#img2{
  background-image:url(image/img2.jpg);
}
#img3{
  background-image:url(image/img3.jpg);
}
#img4{
  background-image:url(image/img4.jpg);
}
.allbtn{
  margin-left:50%;
  position:relative;
  left:-35px;
}
.btn{
  width:5px;
  height:5px;
  border-radius:5px;
  background-color:rgba(225,225,225,0.9);
  float:left;
  margin:30px 6px;
  cursor:pointer;
}
.active{
  width:5px;
  height:5px;
  border-radius:5px;
  background-color:rgba(225,225,225,0.9);
  float:left;
  margin:30px 6px;
  cursor:pointer;
  box-shadow:0 0 5px orange inset;
  border:1px solid white;
}
.turn{
  width:30px;
  height:60px;
  background-image:url(image/jiantou.png);
  background-size:100% 100%;
  margin-top:-240px;
}
#pre{
  float:left;
  margin-left:120px;

}
#next{
  float:right;
  margin-right:120px;
  transform:rotate(180deg);
}
.turn:hover{
  background-image:url(image/jiantouA.png);
}
</style>

</head>
<body>
  <div class="shade">
  <div class="banner" id="banner">
    <div class="img" id="img1"></div>
    <div class="img" id="img2"></div>
    <div class="img" id="img3"></div>
    <div class="img" id="img4"></div>
  </div>
  <div class="press">
    <div class="turn" id="pre"></div>
    <div class="turn" id="next"></div>
  <div class="allbtn" id="allbtn">
    <div class="btn active"></div>
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
  </div>
  
  </div>
</div>
</body>

<script type="text/javascript">
  /*获取元素函数*/
  function byid(id)
  {
    return document.getElementById(id);
  }
  var i=0,
      I=0,
      pic=byid("banner").getElementsByTagName("div"),
      dot=byid("allbtn").getElementsByTagName("div");

    /*1、点击圆点实现跳转*/
  for(var d=0;d<=3;d++)
  {
   dot[d].id=d;
   dot[d].onclick=function()
    {
      for(I=0;I<=3;I++)
      {
        pic[I].style.display="none";
        dot[I].className="btn";
      }
      i=this.id;
      pic[i].style.display="block";
      dot[i].className="active";
      i<3?i++:i=0;
    }
  }
    /*图片自动轮播*/
  window.setInterval(
    function()
    {
      for(I=0;I<=3;I++)
      {
        pic[I].style.display="none";
        dot[I].className="btn";
      };
      console.log(i);
      i<3?i++:i=0;
      pic[i].style.display="block";
      dot[i].className="active";
    },2000);
</script>
</html>

参考教学视频，按自己思路来写，先实现点击圆点跳转，然后实现图片轮播，但是在点击圆点之后图片不会接着点击的页面继续跳转而是继续之前的跳转程序，，，出现不连接的情况，，请问老师这是怎么回事，应该怎样改啊？拜托拜托

写回答

1回答