JavaScript轮番图片

网页上我们经常用一些轮番图片来导航，非常方便，下面直接上代码！
HTML部分

<div class="slideshow-container">
<div class="mySlides fade">   
   <div class="numbertext">1 / 3</div>   
    <img src="img1.jpg" style="width:100%">   
    <div class="text">文本 1</div>
  </div>   
    <div class="mySlides fade">   
     <div class="numbertext">2 / 3</div>  
            <img src="img2.jpg" style="width:100%">   
       <div class="text">文本 2</div>  </div>  
    <div class="mySlides fade"> 
         <div class="numbertext">3 / 3</div>   
                 <img src="img3.jpg" style="width:100%">   
          <div class="text">文本 3</div>  
       </div> 
            <a class="prev" onclick="plusSlides(-1)">❮</a>  <a class="next" onclick="plusSlides(1)">❯</a></div><br>
        <div style="text-align:center">  
             <span class="dot" onclick="currentSlide(1)"></span>
              <span class="dot" onclick="currentSlide(2)"></span> 
                <span class="dot" onclick="currentSlide(3)"></span> 
          </div>

css部分

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none} /* 幻灯片容器 */
.slideshow-container {  
max-width: 1000px;  position: relative;  margin: auto;
} /* 下一张 & 上一张 按钮 */
.prev, .next {  
cursor: pointer;  position: absolute;  top: 50%;  width: auto;  margin-top: -22px;  padding: 16px;  color: white;  font-weight: bold;  font-size: 18px;  transition: 0.6s ease;  border-radius: 0 3px 3px 0;
} /* 定位 "下一张" 按钮靠右 */
.next { 
 right: 0;  border-radius: 3px 0 0 3px;
 } /* On hover, add a black background color with a little bit see-through */
 .prev:hover, .next:hover {  
 background-color: rgba(0,0,0,0.8);
 } /* 标题文本 */
 .text { 
  color: #f2f2f2;  font-size: 15px;  padding: 8px 12px;  position: absolute;  bottom: 8px;  width: 100%;  text-align: center;
  } /* 数字文本 (1/3 等) */
  .numbertext {  
  color: #f2f2f2;  font-size: 12px;  padding: 8px 12px;  position: absolute;  top: 0;
  } /* 标记符号 */
  .dot {  
  cursor:pointer;  height: 13px;  width: 13px;  margin: 0 2px;  background-color: #bbb;  border-radius: 50%;  display: inline-block;  transition: background-color 0.6s ease;
  }
   .active, .dot:hover {
     background-color: #717171;
     } /* 淡出动画 */
     .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}
      }

JavaScript部分

var slideIndex = 1;

showSlides(slideIndex);
 function plusSlides(n) {  
 showSlides(slideIndex += n);
 } 
 function currentSlide(n) { 
  showSlides(slideIndex = n);
  }
   function showSlides(n) { 
     var i; 
     var slides = document.getElementsByClassName("mySlides");  
     var dots = document.getElementsByClassName("dot"); 
  if (n > slides.length) {slideIndex = 1}  
   if (n < 1) {slideIndex = slides.length}  
   for (i = 0; i < slides.length; i++) {     
    slides[i].style.display = "none";  
  }  
  for (i = 0; i < dots.length; i++) {     
   dots[i].className = dots[i].className.replace(" active", ""); 
 } 
       slides[slideIndex-1].style.display = "block";   dots[slideIndex-1].className += " active";
 }

最后一步就是给图片加超链接，这样用户点击图片就跳转了
是这怎么个情况，多多包涵，写的不好，排版有点难看，（毕竟是新人，就将就一点）