纯html+css3+js实现的轮播图

  <div class="container-slider">
        <!-- 设置轮播图片宽高 -->
    	<div class="slider" style="width:400px;height:400px"> 
          <!-- 循环添加轮播图片 -->
          <div class="slide"><img src="1.jpg" alt="图片1" width="100%" height="100%"/></div>
          <div class="slide"><img src="2.jpg" alt="图片2" width="100%" height="100%"/></div>
          <div class="slide"><img src="3.jpg" alt="图片3" width="100%" height="100%"/></div>
          <div class="slide"><img src="4.jpg" alt="图片4" width="100%" height="100%"/></div>
         <!-- 小圆点左右箭头 -->
          <div class="left-btn"><</div>
          <div class="right-btn">></div> 
          <ul class="dot">
             <li class="active">1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
          </ul>
        </div>
      </div>

   .container-slider {
    	position:relative;
      }
      .slider {
    	position:relative;
    	top:0;
    	left:0;
    	right:0;
    	bottom:0;
    	margin:auto;
      }
      .slider .slide {
    	position:absolute;
    	width:100%;
    	height:100%;
      }
      .slider .slide:nth-child(1) {
    	left: 0;
      }
      .slider .slide:nth-child(2) {
    	left:100%;
      }
      .slider .slide:nth-child(3) {
    	left:200%;
      }
      .slider .slide:nth-child(4) {
    	left:300%;
      }
      /* 小点点 */
      .container-slider .dot {
    	position:absolute;
    	width:100%;
    	height:20px;
    	margin:0 auto;
    	padding:0;
    	bottom:20px;
    	text-align:center;
      }
      .container-slider .dot li {
    	float:left;
    	list-style:none;
    	width:20px;
    	height:20px;
    	margin:6px;
    	background-color:#ddd;
    	border-radius:20px;
      }
      .container-slider .dot li.active {
    	background-color:#666;
      }
      /* 左右按钮 */
      .slider .left-btn,
      .slider .right-btn { 
    	position:absolute;
    	width:30px;
    	height:30px;
    	border-radius:60px;
    	line-height:30px;
    	background-color:#ddd
      }
      .slider .left-btn {
    	top:50%;
    	left: 10px;
      }
      .slider .right-btn { 
    	top:50%;
    	right: 10px;
      }  

     //获取轮播图片
      var slider = document.getElementByClassName("slider")[0],
          imgs = slider.getElementsByTagName("img"),
          leftBtn = document.getElementsByClassName("left-btn")[0],
          rightBtn = document.getElementsByClassName("right-btn")[0],
          dots = document.getElementsByClassName("dot")[0],
          dot = dots.getElementsByTagName("li"),
          sliderWidth = 400, // 图片宽度
          now = 0, // 当前图片索引
          timer = null; // 计时器

      // 开启计时器
      autoPlay();
      function autoPlay(){
          timer = setInterval(function(){
              //索引自增
              now++;
              if(now == imgs.length){
                  now = 0;
              }
              //移动多少距离
              var left = -now * sliderWidth;
              //调用函数
              slidermove(slider,left);
              // 更改当前小点点的样式
              for(var i = 0;i < dot.length;i++){
                  dot[i].className = ''; 
              }
              dot[now].className = "active";
          },3000)
      }

      // 鼠标经过时关闭计时器
      slider.onmousemove = function(){
          clearInterval(timer);
      }

      // 鼠标离开时再次开启计时器
      slider.onmouseleave = function(){
          autoPlay();
      }

      // 轮播图片移动
      function slidermove(el,target){
          clearInterval(el.timer);
          el.timer = setInterval(function(){
              var speed = target > el.offsetLeft?10:-10;
              el.style.left = el.offsetLeft + speed + "px";
              if(Math.abs(target - el.offsetLeft) < 10){
                  el.style.left = target + "px";
                  clearInterval(el.timer);
              }
          },20)
      }

      // 左右按钮控制轮播图片
      rightBtn.onclick = function(){
          now++;
          if(now == imgs.length){
              now = 0;
          }
          var left = -now * sliderWidth;
          slidermove(slider,left);
          for(var i = 0;i < dot.length;i++){
              dot[i].className = ''; 
          }
          dot[now].className = "active";
      }

      // 向左移动
      leftBtn.onclick = function(){
          now--;
          if(now == -1){
              now = imgs.length - 1;
          }
          var left = -now * sliderWidth;
          slidermove(slider,left);
          for(var i = 0;i < dot.length;i++){
              dot[i].className = ''; 
          }
          dot[now].className = "active";
      }

      // 点击小点点切换轮播图片
      for(var i=0;i < dot.length;i++){
          dot[i].index = i;
          dot[i].onclick = function(){
              // 当前小点点
              var _this = this;
              var left = -_this.index * sliderWidth;
              slidermove(slider,left);
              for(var i=0;i < dot.length;i++){
                  dot[i].className = '';
              }
              dot[_this.index].className = "active";
              now = _this.index;
          }
      }