图片轮番详解

<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body,
			html {
				width: 100%;
				height: 100%;
			}
			
			.swiper-container {
				width: 100%;
				height: 100%;
				margin: 0 auto;
				overflow: hidden;
				z-index: 1;
			}
			
			.swiper-wrapper {
				display: flex;
				display: -webkit-flex;
				flex-wrap: nowrap;
				-webkit-flex-wrap: nowrap;
			}
			
			.swiper-slide,
			.swiper-wrapper {
				height: 100%;
				-ms-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-webkit-transform-style: preserve-3d;
			}
			
			.swiper-slide {
				width: 100%;
				height: 100%;
				-webkit-flex-shrink: 0;
				-ms-flex: 0 0 auto;
				flex-shrink: 0;
				line-height: 300px;
				color: #fff;
				text-align: center;
			}
		</style>

<script>   
  var slides = document.querySelectorAll(".swiper-slide");   
  var wrapper = document.querySelector(".swiper-wrapper");   
  var wWidth = window.innerWidth;   
  var turn = {   
      slides:document.querySelectorAll(".swiper-slide"),   
      wrapper:document.querySelector(".swiper-wrapper"),   
      moveX: (-wWidth),   
      pageInit: function() {   
      for (var i = 0; i < slides.length; i++) {   
         slides[i].style.width = wWidth + "px";   
      }   
      var first = slides[0].cloneNode(true);   
      var last = slides[slides.length - 1].cloneNode(true);   
      wrapper.appendChild(first);   
      wrapper.insertBefore(last, slides[0]);   
      slides = document.querySelectorAll(".swiper-slide");   
      wrapper.style.webkitTransitionDuration = "0ms";   
      wrapper.style.webkitTransform = "translate3d(" + turn.moveX + "px,0px,0px)";   
      turn.loop();   
   },   
   loop: function() {   
   setInterval(function() {   
      wrapper.style.webkitTransitionDuration = "1s";   
      if (Math.abs(turn.moveX) >= (slides.length - 1) * slides[0].offsetWidth) {   
         turn.moveX = (-wWidth);   
         wrapper.style.webkitTransitionDuration = "0ms";   
         wrapper.style.webkitTransform = "translate3d(-" + wWidth + "px,0px,0px)";   
      } else {   
         turn.moveX -= wWidth;   
         wrapper.style.webkitTransform = "translate3d(" + turn.moveX + "px,0px,0px)";   
     }   
   }, 2000);   
   }   
}    
turn.pageInit();

</script>