JS 实现图片模态框，幻灯片，跑马灯功能

网站中常用的幻灯片和模态框，使用 HTML、JavaScript 与 CSS 来创建 Lightbox，类似相册预览功能。可以运用到视频网站，商城，相册上去

参考了菜鸟教程，有兴趣自己去看

HTML//写代码时，HTML记得包裹顺序就行，其他的往下写，搭建结构

 <!-- 图片改为你的图片地址 -->
 <h2 style="text-align:center">Lightbox</h2>

 <div class="row">
   <div class="column">
     <img src="http://static.runoob.com/images/demo/demo1.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
   </div>
   <div class="column">
     <img src="http://static.runoob.com/images/demo/demo2.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
   </div>
   <div class="column">
     <img src="http://static.runoob.com/images/demo/demo3.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
   </div>
   <div class="column">
     <img src="http://static.runoob.com/images/demo/demo4.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
   </div>
 </div>

 <div id="myModal" class="modal">
   <span class="close cursor" onclick="closeModal()">&times;</span>
   <div class="modal-content">

     <div class="mySlides">
       <div class="numbertext">1 / 4</div>
       <img src="http://static.runoob.com/images/demo/demo1.jpg" style="width:100%">
     </div>

     <div class="mySlides">
       <div class="numbertext">2 / 4</div>
       <img src="http://static.runoob.com/images/demo/demo2.jpg" style="width:100%">
     </div>

     <div class="mySlides">
       <div class="numbertext">3 / 4</div>
       <img src="http://static.runoob.com/images/demo/demo3.jpg" style="width:100%">
     </div>

     <div class="mySlides">
       <div class="numbertext">4 / 4</div>
       <img src="http://static.runoob.com/images/demo/demo4.jpg" style="width:100%">
     </div>

     <a class="prev" onclick="plusSlides(-1)">❮</a>
     <a class="next" onclick="plusSlides(1)">❯</a>

     <div class="caption-container">
       <p id="caption"></p>
     </div>

     <div class="column">
       <img class="demo cursor" src="http://static.runoob.com/images/demo/demo1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
     </div>
     <div class="column">
       <img class="demo cursor" src="http://static.runoob.com/images/demo/demo2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
     </div>
     <div class="column">
       <img class="demo cursor" src="http://static.runoob.com/images/demo/demo3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
     </div>
     <div class="column">
       <img class="demo cursor" src="http://static.runoob.com/images/demo/demo4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
     </div>
   </div>
 </div>

css//主要是利用浮动，定位，显示，背景，边框等把效果做出来

 body {
   font-family: Verdana, sans-serif;
   margin:;
 }

 * {
   box-sizing: border-box;
 }

 .row > .column {
   padding: 0 8px;
 }

 .row:after {
   content: "";
   display: table;
   clear: both;
 }

 .column {
   float: left;
   width: 25%;
 }

 /* 弹窗背景 */
 .modal {
   display: none;
   position: fixed;
   z-index:;
   padding-top: 100px;
   left:;
   top:;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: black;
 }

 /* 弹窗内容 */
 .modal-content {
   position: relative;
   background-color: #fefefe;
   margin: auto;
   padding:;
   width: 90%;
   max-width: 1200px;
 }

 /* 关闭按钮 */
 .close {
   color: white;
   position: absolute;
   top: 10px;
   right: 25px;
   font-size: 35px;
   font-weight: bold;
 }

 .close:hover,
 .close:focus {
   color: #999;
   text-decoration: none;
   cursor: pointer;
 }

 .mySlides {
   display: none;
 }

 .cursor {
   cursor: pointer
 }

 /* 上一页 & 下一页 按钮 */
 .prev,
 .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   padding: 16px;
   margin-top: -50px;
   color: white;
   font-weight: bold;
   font-size: 20px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
   -webkit-user-select: none;
 }

 /* 定位下一页按钮到右侧 */
 .next {
   right:;
   border-radius: 3px 0 0 3px;
 }

 /* 鼠标移动上去修改背景色为黑色 */
 .prev:hover,
 .next:hover {
   background-color: rgba(0, 0, 0, 0.8);
 }

 /* 页数(1/3 etc) */
 .numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top:;
 }

 img {
   margin-bottom: -4px;
 }

 .caption-container {
   text-align: center;
   background-color: black;
   padding: 2px 16px;
   color: white;
 }

 .demo {
   opacity: 0.6;
 }

 .active,
 .demo:hover {
   opacity:;
 }

 img.hover-shadow {
   transition: 0.3s
 }

 .hover-shadow:hover {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
 }

JS//实现动态效果，主要是第一控制样式，第二是控制幻灯片，点击时能到对应的位子显示对应的图片内容

 <script>
     //点击图片时打开模态框display来控制
     function openModel()
             { document.getElementById("myModal").style.display="block";}
     //当点击关闭按钮是将模态框关闭display为none;
     function closeModal()
              { document.getElementById('myModal').style.display = "none";}
     //当点击模态框外的地方关闭模态框
     window.onclick=function(ev){
       var   model=document.getElementById('myModal')
        if(ev.target!=="model"){
             model.style.display = "none";
        }
      }
      //设计一个显示幻灯片的函数
      var slideIndex = 1;//默认显示第一张
      function showSlides(){
       //获得幻灯片和幻动片控制器
          var slides = document.getElementsByClassName("mySlides");
          var dots = document.getElementsByClassName("demo");
       //获得每个幻灯片显示的标题
    var captionText = document.getElementById("caption");

           slideIndex++；

 //判断万一输入的数字大于幻灯片数怎么办，让他回到第一张 

 if(slideIndex>slides.length) {slideIndex = 1}; 

 //反之万一小于呢，就让他回到最后一张（当然也可以自己决定） 

 if(n<1) {slideIndex =slides.length }; 
 //先把所有幻灯片隐藏起来

         for(var i=0;i<slides.length;i++){
            slides[i].style.display="none";

         }
       //给幻灯片控制器一个样式，否则不知道是不是这个控制器有没有用
         for (var j = 0; j < dots.length; j++) {
            dots[j].className = dots[j].className.replace(" active", "");
       }
        //下面就是把当传入的值是哪个就让他显示哪个，slideIndex控制幻灯片（他可以是任何东西）
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
        //把幻灯片标题显示过来
        captionText.innerHTML = dots[slideIndex-1].alt;
        setTimeout(showSlides, 1000); // 切换时间为 1 秒
       };
      //运行这个函数
       showSlides(slideIndex);
      //在注册两个前进后退的函数
      function plusSlides(n) {
           showSlides(slideIndex += n);
      }

       function currentSlide(n) {
           showSlides(slideIndex = n);
      }
    //用定时器可以设置自动播放
   </script>