简单的js图片轮播：

1.html代码：

<div class="wrap">
	  <div class="mySlides fade">
		    <div class="numbertext">1 / 4</div>
		   			 <img src="img2/img1.png" style="width:100%">
		    <div class="text">文本 1</div>
	  </div>
	  <div class="mySlides fade">
		    <div class="numbertext">2 / 4</div>
		   			 <img src="img2/img2.png" style="width:100%">
		    <div class="text">文本 2</div>
	  </div>
	  <div class="mySlides fade">
	    <div class="numbertext">3 / 4</div>
	    <img src="img2/img3.png" style="width:100%">
	    <div class="text">文本 3</div>
	  </div>
	  <div class="mySlides fade">
		   	<div class="numbertext">4 / 4</div>
		    		<img src="img2/img4.png" style="width:100%">
		    <div class="text">文本 4</div>
	  </div>

2.CSS代码:

	.wrap {
	  width: 50px;
	  margin:0  auto;
	  position: relative;
	  
	}
	.fade {
	  -webkit-animation-name: fade;
	  -webkit-animation-duration: 1.5s;
	  animation-name: fade;
	  animation-duration: 1.5s;
	}
	
	@-webkit-keyframes fade {
	  from {opacity: .4} 
	  to {opacity: 1}
	}
	
	@keyframes fade {
	  from {opacity: .4} 
	  to {opacity: 1}
	}

3.JS代码：

<script>
			var slideIndex = 0;
			showSlides();
	
			function showSlides() {
			    var i;
			    var slides = document.getElementsByClassName("mySlides");
			   
			    for (i = 0; i < slides.length; i++) {
			       slides[i].style.display = "none";  
			    }
			    if (slideIndex == slides.length) { 
			    	slideIndex = 0;
			    }
			    slides[slideIndex].style.display = "block";  
			     slideIndex++;
			    setTimeout(showSlides, 2000); // 切换时间为 2 秒
			}