效果图
1.首页面
2.点击图片弹出内容
3.点击箭头可左右切换,且下面小图跟随切换
4.点击×关闭
用来练手的小项目,不是很熟练,希望大佬多多指教!
下面贴上代码
<html>
<head>
<meta charset="utf-8">
<link href="../css/Lightbox.css" rel="stylesheet">
</head>
<body>
<h2 style="text-align: center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="../image/car-1.jpg" style="width: 100%" class="img" slideIndex="1">
</div>
<div class="column">
<img src="../image/car-2.jpg" style="width: 100%" class="img" slideIndex="2">
</div>
<div class="column">
<img src="../image/car-3.jpg" style="width: 100%" class="img" slideIndex="3">
</div>
<div class="column">
<img src="../image/car-4.jpg" style="width: 100%" class="img" slideIndex="4">
</div>
<div class="column">
<img src="../image/car-5.jpg" style="width: 100%" class="img" slideIndex="5">
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1/5</div>
<img src="../image/car-1.jpg" style="width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">2/5</div>
<img src="../image/car-2.jpg" style="width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">3/5</div>
<img src="../image/car-3.jpg" style="width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">4/5</div>
<img src="../image/car-4.jpg" style="width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">5/5</div>
<img src="../image/car-5.jpg" style="width: 100%;">
</div>
<a href="javascript:void(0)" class="prev">❮</a>
<a href="javascript:void(0)" class="next">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img src="../image/car-1.jpg" class="demo " style="width: 100%" alt="享受速度" slideIndex="1">
</div>
<div class="column">
<img src="../image/car-2.jpg" class="demo " style="width: 100%" alt="追求自我" slideIndex="2">
</div>
<div class="column">
<img src="../image/car-3.jpg" class="demo " style="width: 100%" alt="风驰电掣" slideIndex="3">
</div>
<div class="column">
<img src="../image/car-4.jpg" class="demo " style="width: 100%" alt="速度激情" slideIndex="4">
</div>
<div class="column">
<img src="../image/car-5.jpg" class="demo " style="width: 100%" alt="自由自在" slideIndex="5">
</div>
</div>
</div>
<script src="../js/Lightbox.js">
</script>
</body>
</html>
*{
text-decoration: none;
box-sizing: border-box;
}
body{
margin: 0;
}
.column{
float: left;
width:20%;
padding:0 8px;
}
.column img{
cursor: pointer;
}
.column img:hover{
-webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) ;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) ;
}
.row:after{
content: '';
display: table;
clear: both;
}
/*显示页面开始*/
.modal {
z-index: 1;
display:none;
position: fixed;
left:0;
top:0;
width:100%;
height:100%;
padding-top: 100px;
background: #000000;
overflow: auto;
}
.modal-content{
position: relative;
padding:0;
margin:auto;
background-color: #fefefe;
width: 90%;
max-width: 1200px;
}
.modal .close{
font-size: 35px;
font-weight:bold;
color: #ffffff;
position: absolute;
top:10px;
right: 25px;
}
.close:hover{
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display:none;
}
.prev,.next{
cursor: pointer;
position: absolute;
top:50%;
margin-top: -50px;
width: auto;
padding: 16px;
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: 0;
}
.prev:hover,.next:hover{
background: rgba(0, 0, 0, 0.8);
}
.numbertext{
position: absolute;
top: 20px;
left:20px;
font-size: 20px;
color: #ffffff;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active{
opacity:1;
}
.demo:hover {
opacity: 1;
}
.modal-content .column{
padding:0;
}
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)
}
window.onload=function () {
var mySlides=document.getElementsByClassName("mySlides");
var prev=document.getElementsByClassName("prev")[0];
var next=document.getElementsByClassName("next")[0];
var caption=document.getElementById("caption");
var dots=document.getElementsByClassName("demo");
var close=document.getElementsByClassName("close")[0];
var myModal=document.getElementById("myModal");
var img=document.getElementsByClassName("img");
var slideIndex=1;
for(var i=0;i<img.length;i++){
img[i].onclick=function () {
myModal.style.display="block";
var myIndex=this.getAttribute("slideIndex");
console.log(myIndex);
slideIndex=myIndex;
showSlides(slideIndex);
}
}
close.onclick=function () {
myModal.style.display="none";
}
showSlides(slideIndex);
//切换函数
function showSlides(n) {
for(var i=0;i<mySlides.length;i++){
mySlides[i].style.display="none";
}
for(var i=0;i<dots.length;i++){
dots[i].className = dots[i].className.replace(" active", "");
}
dots[slideIndex-1].className += " active";
mySlides[slideIndex-1].style.display="block";
caption.innerHTML=dots[slideIndex-1].alt;
}
//箭头切换
prev.onclick=function () {
if(slideIndex>1){
slideIndex--;
showSlides(slideIndex);
}else {
slideIndex=5;
showSlides(slideIndex);
}
}
next.onclick=function () {
if(slideIndex<5){
slideIndex++;
showSlides(slideIndex);
}else {
slideIndex=1;
showSlides(slideIndex);
}
}
//点击下方图片切换
for(var i=0;i<dots.length;i++){
dots[i].onclick=function () {
var index=parseInt(this.getAttribute("slideIndex"));
slideIndex=index;
showSlides(slideIndex);
}
}
}
加油学习奥!