正文

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

IP云
IP云V管理员/3 阅读
10/27
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

网站中常用的幻灯片和模态框，使用 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>