JS 实现图片模态框，幻灯片，跑马灯功能
Posted 给自己一个梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 实现图片模态框，幻灯片，跑马灯功能相关的知识，希望对你有一定的参考价值。
网站中常用的幻灯片和模态框，使用 html、javascript 与 CSS 来创建 Lightbox，类似相册预览功能。可以运用到视频网站，商城，相册上去
参考了菜鸟教程，有兴趣自己去看
HTML//写代码时，HTML记得包裹顺序就行，其他的往下写，搭建结构
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()">×</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)">❮</a> 44 <a class="next" onclick="plusSlides(1)">❯</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>
css//主要是利用浮动，定位，显示，背景，边框等把效果做出来
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.3s 135 } 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 }
JS//实现动态效果，主要是第一控制样式，第二是控制幻灯片，点击时能到对应的位子显示对应的图片内容
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>
以上是关于JS 实现图片模态框，幻灯片，跑马灯功能的主要内容，如果未能解决你的问题，请参考以下文章