网站中常用的幻灯片和模态框，使用 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>
原文地址：https://www.cnblogs.com/weblife/p/10291137.html
时间： 2024-08-28 09:11:16