Fotoğraf Galerisi Yapımı - HTML5 - CSS3 - JavaScript Ders3
İndex.html İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Resim Galerisi</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<img class="slides" src="images/1.jpg"/>
<img class="slides" src="images/2.jpg"/>
<img class="slides" src="images/3.jpg"/>
<img class="slides" src="images/4.jpg"/>
<img class="slides" src="images/5.jpg"/>
<img class="slides" src="images/6.jpg"/>
<img class="slides" src="images/7.jpg"/>
<img class="slides" src="images/8.jpg"/>
<img class="slides" src="images/9.jpg"/>
<button class="btn" onclick="plusIndex(-1)" id="btn1">❮</button>
<button class="btn" onclick="plusIndex(1)" id="btn2">❯</button>
</div>
</body>
<script>
var index = 1;
function plusIndex(n){
index = index + n;
showImage(index);
}
showImage(1);
function showImage(n){
var i;
var x = document.getElementsByClassName("slides");
if(n > x.length){index = 1};
if(n < 1){index = x.length};
for (i=0;i<x.length;i++)
x[i].style.display = "none";
x[index-1].style.display = "block";
}
</script>
</html>
Style.css İÇERİĞİ:
#container{
width:80%;
height:450px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
#container>img{
width:100%;
height:100%;
position:absolute;
}
#container>.btn{
position: absolute;
width: 50px;
height: 50px;
border: none;
border-radius: 25px;
top: 200px;
background:black;
color: white;
font-size: 20px;
}
#container>#btn1:hover{
box-shadow: 10px 0px 20px 0px black;
}
#container>#btn2:hover{
box-shadow: -10px 0px 20px 0px black;
}
#container>#btn2{
position: relative;
float: right;
}
Yorumlar
Yorum Gönder