轮播图的实现

轮播图实现（H5+CS3+JS&JQuery）

最终效果图如下：

每2000毫秒自动轮播，鼠标划入显示左右按钮；进行自行左右点击切换。划出隐藏按钮并继续进行自动播放。
轮播图的实现

***下面将贴出我的实现代码：***

首先引入jquery

<script src="jquery-2.1.0.js"></script>

页面Html

<body>
 <div id="container">
    <div id="div1" style="left:-2000px;">
      <img src="4.jpg" alt="1">
      <img src="5.jpg" alt="2">
      <img src="6.jpg" alt="3">
      <img src="7.jpg" alt="4">
      <img src="4.jpg" alt="1">
      <img src="5.jpg" alt="2">
    </div>
    <div id="buttons">
      <span index="1" class="actived"></span>
      <span index="2"></span>
      <span index="3"></span>
      <span index="4"></span>
    </div>
    <div id="left-right">
    <div id="left" onclick="pre()">&lsaquo;</div>
    <div id="right" onclick="af()">&rsaquo;</div>
    <div>
  </div>
</body>

css样式：

#container{
    border:solid;
    width:500px;
    height:320px;
    margin:0 auto;
    position:relative;
    overflow: hidden;
  }
  #div1{
    width:4200px;
    height:300px;
    position:absolute;
  }
  img{
    float:left;
    width:500px;
    height:300px;
    z-index: 2;
  }
  #buttons{//圆点导航框
   position:absolute;
   z-index: 1;
   width: 130px;
   height: 20px;
   left:370px;
   margin-left:-187.5px;
   margin-top:298px;
 }
 #buttons span{//圆点样式
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 5px;
  height: 5px;
  top:8px;
  left:35px;
  margin-left: 5px;
  border-radius: 50%;
  float: left;
  background-color:rgba(0,0,0,0.1);
}
#buttons .actived{//选中时样式
  border: 1px solid rgba(205,133,63,1);
  background-color: rgba(205,133,63,1);
}
#left-right{
  display: none;
  position: relative;
  top:143px;
  width: 500px;
  height: 50px;
}
#left,#right{//左右按钮样式
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 30px;
  border-radius: 50%;
  background-color:rgba(0, 0, 0, 0.1);
}
#left{
  float:left;
}
#right{
  float:right;
}

实现效果的js代码

 var timer;
    //Dom元素加载完成后执行的代码
    $(document).ready(function() {
      $("#container").mouseover(function(event){
        clearInterval(timer);//清除计时器
        setlr();
      }).mouseout(function(event) {
        $("#left-right").css("display","none");
        play();
      });
      $("#left-right").click(function(event) {
        setlr();
      });
      play();
    });
    //图片变换；
    function animate(offset) {
      var div = document.querySelector("#div1");
      var newleft = parseInt(div.style.left) + offset;
      if (newleft < -2000) {
        div.style.left = -500 + "px";
      } else if (newleft > -500) {
        div.style.left = -2000 + "px";
      } else {
        div.style.left = newleft + "px";
      }
        changespan(parseInt(div.style.left));
    };
    //监听圆点状态；
    function changespan(le){
      switch(le){
      case -2000:
      $("span").attr("class","");
      $("[index='1']").attr("class","actived");
      break;
      case -1500:
        $("span").attr("class","");
       $("[index='2']").attr("class","actived");
      break;
      case -1000:
        $("span").attr("class","");
       $("[index='3']").attr("class","actived");
      break;
      case -500:
        $("span").attr("class","");
       $("[index='4']").attr("class","actived");
      break;
      } 
    };
    //监听按钮显示与隐藏；
    function setlr(){
      var div = document.querySelector("#div1");
      $("#left-right").css("display","block");
      if(parseInt(div.style.left) ==-2000 || (parseInt(div.style.left) + 1500)==-500){
        $("#left").css("display","none");
        $("#right").css({"display":"block","cursor":"pointer"});
      }else if(parseInt(div.style.left)==-500 || (parseInt(div.style.left) + -1500)==-2000 ){
        $("#left").css({"display":"block","cursor":"pointer"});
        $("#right").css("display","none");
      }else{
        $("#left").css({"display":"block","cursor":"pointer"});
        $("#right").css({"display":"block","cursor":"pointer"});
      }
    }
    function play(){
       timer=setInterval("animate(500)", 2000);
    }
    //左箭头点击时，出发事件；
    function pre(){
      animate(-500);
    }
    //右箭头点击时，出发事件;
    function af(){
       animate(500);
    }

希望能帮到大家，谢谢！！