描述

js实现图片轮播图效果

代码

var arr = new Array("1.jpg","2.jpg","3.jpg","4.png");
var index = 0;
//窗口加载完毕  调用函数 匿名函数
window.onload=function(){
  window.setInterval("change()",2000);
}

function change(){
  index++;
  document.getElementById("myimg").src="img/"+arr[index];
  
  var circleArr = document.getElementById("circle_list").children;
  
  for(var i = 0 ;i<circleArr.length;i++){
    circleArr[i].className="circle"
  }
  
  circleArr[index].className="circle focus";
  
  if(index == 3){
    index = -1;
  }
}
.circle{
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid white;
  border-radius: 10px;
  margin-left: 5px;
}

.circle_list{
  margin-top: -30px;
}

.focus{
  background-color: white;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/index3.js"></script>
    <link rel="stylesheet" href="css/index3.css"/>
  </head>
  <body>
    <div>
    <img id="myimg" src="img/1.jpg"/>
    </div>
    <div id="circle_list" class="circle_list">
      <span class="circle focus"></span>
      <span class="circle"></span>
      <span class="circle"></span>
      <span class="circle"></span>
    </div>
  </body>
</html>

效果图

js实现图片轮播图效果_ci

讲解

使用css加js加html实现一个简单的轮播图效果