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

Posted 给自己一个梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS 实现图片模态框,幻灯片,跑马灯功能相关的知识,希望对你有一定的参考价值。

网站中常用的幻灯片和模态框,使用 htmljavascript 与 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()">&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>

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 实现图片模态框,幻灯片,跑马灯功能的主要内容,如果未能解决你的问题,请参考以下文章

模态框 modal.js

js 实例2 实现模态框弹出;

js实现模态框的拖曳功能

使用js实现显示系统当前时间并实现倒计时功能并触发模态框(遮罩)功能

js怎么实现标题跑马灯功能?

js再谈移动端的模态框实现