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

 1 <!-- 图片改为你的图片地址 --> 2 <h2 style="text-align:center">Lightbox</h2> 3 ??4 <div class="row"> 5 ??<div class="column"> 6 ????<img src="http://static.runoob.com/images/demo/demo1.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> 7 ??</div> 8 ??<div class="column"> 9 ????<img src="http://static.runoob.com/images/demo/demo2.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">10 ??</div>11 ??<div class="column">12 ????<img src="http://static.runoob.com/images/demo/demo3.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">13 ??</div>14 ??<div class="column">15 ????<img src="http://static.runoob.com/images/demo/demo4.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">16 ??</div>17 </div>18 ?19 <div id="myModal" class="modal">20 ??<span class="close cursor" onclick="closeModal()">&times;</span>21 ??<div class="modal-content">22 ?23 ????<div class="mySlides">24 ??????<div class="numbertext">1 / 4</div>25 ??????<img src="http://static.runoob.com/images/demo/demo1.jpg" style="width:100%">26 ????</div>27 ?28 ????<div class="mySlides">29 ??????<div class="numbertext">2 / 4</div>30 ??????<img src="http://static.runoob.com/images/demo/demo2.jpg" style="width:100%">31 ????</div>32 ?33 ????<div class="mySlides">34 ??????<div class="numbertext">3 / 4</div>35 ??????<img src="http://static.runoob.com/images/demo/demo3.jpg" style="width:100%">36 ????</div>37 ????38 ????<div class="mySlides">39 ??????<div class="numbertext">4 / 4</div>40 ??????<img src="http://static.runoob.com/images/demo/demo4.jpg" style="width:100%">41 ????</div>42 ????43 ????<a class="prev" onclick="plusSlides(-1)">&#10094;</a>44 ????<a class="next" onclick="plusSlides(1)">&#10095;</a>45 ?46 ????<div class="caption-container">47 ??????<p id="caption"></p>48 ????</div>49 ?50 ?51 ????<div class="column">52 ??????<img class="demo cursor" src="http://static.runoob.com/images/demo/demo1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">53 ????</div>54 ????<div class="column">55 ??????<img class="demo cursor" src="http://static.runoob.com/images/demo/demo2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">56 ????</div>57 ????<div class="column">58 ??????<img class="demo cursor" src="http://static.runoob.com/images/demo/demo3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">59 ????</div>60 ????<div class="column">61 ??????<img class="demo cursor" src="http://static.runoob.com/images/demo/demo4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">62 ????</div>63 ??</div>64 </div>

 ?1 body { ?2 ??font-family: Verdana, sans-serif; ?3 ??margin: 0; ?4 } ?5 ???6 * { ?7 ??box-sizing: border-box; ?8 } ?9 ??10 .row > .column { 11 ??padding: 0 8px; 12 } 13 ??14 .row:after { 15 ??content: ""; 16 ??display: table; 17 ??clear: both; 18 } 19 ??20 .column { 21 ??float: left; 22 ??width: 25%; 23 } 24 ??25 /* 弹窗背景 */ 26 .modal { 27 ??display: none; 28 ??position: fixed; 29 ??z-index: 1; 30 ??padding-top: 100px; 31 ??left: 0; 32 ??top: 0; 33 ??width: 100%; 34 ??height: 100%; 35 ??overflow: auto; 36 ??background-color: black; 37 } 38 ??39 /* 弹窗内容 */ 40 .modal-content { 41 ??position: relative; 42 ??background-color: #fefefe; 43 ??margin: auto; 44 ??padding: 0; 45 ??width: 90%; 46 ??max-width: 1200px; 47 } 48 ??49 /* 关闭按钮 */ 50 .close { 51 ??color: white; 52 ??position: absolute; 53 ??top: 10px; 54 ??right: 25px; 55 ??font-size: 35px; 56 ??font-weight: bold; 57 } 58 ??59 .close:hover, 60 .close:focus { 61 ??color: #999; 62 ??text-decoration: none; 63 ??cursor: pointer; 64 } 65 ??66 .mySlides { 67 ??display: none; 68 } 69 ??70 .cursor { 71 ??cursor: pointer 72 } 73 ??74 /* 上一页 & 下一页 按钮 */ 75 .prev, 76 .next { 77 ??cursor: pointer; 78 ??position: absolute; 79 ??top: 50%; 80 ??width: auto; 81 ??padding: 16px; 82 ??margin-top: -50px; 83 ??color: white; 84 ??font-weight: bold; 85 ??font-size: 20px; 86 ??transition: 0.6s ease; 87 ??border-radius: 0 3px 3px 0; 88 ??user-select: none; 89 ??-webkit-user-select: none; 90 } 91 ??92 /* 定位下一页按钮到右侧 */ 93 .next { 94 ??right: 0; 95 ??border-radius: 3px 0 0 3px; 96 } 97 ??98 /* 鼠标移动上去修改背景色为黑色 */ 99 .prev:hover,100 .next:hover {101 ??background-color: rgba(0, 0, 0, 0.8);102 }103 ?104 /* 页数(1/3 etc) */105 .numbertext {106 ??color: #f2f2f2;107 ??font-size: 12px;108 ??padding: 8px 12px;109 ??position: absolute;110 ??top: 0;111 }112 ?113 img {114 ??margin-bottom: -4px;115 }116 ?117 .caption-container {118 ??text-align: center;119 ??background-color: black;120 ??padding: 2px 16px;121 ??color: white;122 }123 ?124 .demo {125 ??opacity: 0.6;126 }127 ?128 .active,129 .demo:hover {130 ??opacity: 1;131 }132 ?133 img.hover-shadow {134 ??transition: 0.3s135 }136 ?137 .hover-shadow:hover {138 ??box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)139 }

 1 <script> 2 ????//点击图片时打开模态框display来控制 3 ????function openModel() 4 ????????????{ document.getElementById("myModal").style.display="block";} 5 ????//当点击关闭按钮是将模态框关闭display为none; 6 ????function closeModal() ?7 ?????????????{ document.getElementById(‘myModal‘).style.display = "none";} 8 ????//当点击模态框外的地方关闭模态框 9 ????window.onclick=function(ev){10 ??????var ??model=document.getElementById(‘myModal‘)11 ???????if(ev.target!=="model"){12 ????????????model.style.display = "none";13 ???????}14 ?????}15 ?????//设计一个显示幻灯片的函数16 ?????var slideIndex = 1;//默认显示第一张17 ?????function showSlides(){18 ??????//获得幻灯片和幻动片控制器19 ?????????var slides = document.getElementsByClassName("mySlides");20 ?????????var dots = document.getElementsByClassName("demo");21 ??????//获得每个幻灯片显示的标题22 ???var captionText = document.getElementById("caption");

 ??????????slideIndex++；

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

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

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

26 if(n<1) {slideIndex =slides.length }; 
27 //先把所有幻灯片隐藏起来
 ??????????
28 ????????for(var i=0;i<slides.length;i++){29 ???????????slides[i].style.display="none";30 31 ????????}32 ??????//给幻灯片控制器一个样式，否则不知道是不是这个控制器有没有用33 ????????for (var j = 0; j < dots.length; j++) {34 ???????????dots[j].className = dots[j].className.replace(" active", "");35 ??????}36 ???????//下面就是把当传入的值是哪个就让他显示哪个，slideIndex控制幻灯片（他可以是任何东西）37 ???????slides[slideIndex-1].style.display = "block";38 ???????dots[slideIndex-1].className += " active";39 ???????//把幻灯片标题显示过来40 ???????captionText.innerHTML = dots[slideIndex-1].alt; ?41 ???????setTimeout(showSlides, 1000); // 切换时间为 1 秒42 ??????};43 ?????//运行这个函数44 ??????showSlides(slideIndex);45 ?????//在注册两个前进后退的函数46 ?????function plusSlides(n) {47 ??????????showSlides(slideIndex += n);48 ?????}49 ?50 ??????function currentSlide(n) {51 ??????????showSlides(slideIndex = n);52 ?????}53 ???//用定时器可以设置自动播放54 ?60 </script>