Karuselės realizavimas naudojantis opacity ('peršviečiamumu'). Praeitame įraše keitėme display parametrą kiekvienam img elementui. Šiuo atveju keičiame pridėdami klasę showed - kurioje paveikslas matomas, o visi kiti - peršviečiami (kurie neturi šios klasės). Daugiau logiką tokia pati.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Paveikslėlių galerija</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gallery">
<div class="photos">
<img src="img/agriculture-cornfield-field-7601.jpg" class="showed">
<img src="img/agriculture-countryside-field-7976.jpg">
<img src="img/autumn-dawn-daylight-401080.jpg">
<img src="img/backlit-dawn-daylight-257092.jpg">
<img src="img/backlit-dawn-dusk-219890.jpg">
<img src="img/city-clouds-hills-94649.jpg">
<img src="img/environment-forest-green-141233.jpg">
<img src="img/firs-fog-forest-6858.jpg">
<img src="img/forest-sun-sunlight-9020.jpg">
</div>
<div class="buttons">
<input type="button" value="Atgal" class="prev">
<input type="button" value="Pirmyn" class="next">
</div>
</div>
<script>
var btn_prev = document.querySelector('#gallery .buttons .prev');
var btn_next = document.querySelector('#gallery .buttons .next');
var images = document.querySelectorAll('#gallery .photos img');
var i=0;
btn_prev.onclick = function(){
images[i].className = '';
i--;
if(i < 0){
i = images.length - 1;
}
images[i].className = 'showed';
}
btn_next.onclick = function(){
images[i].className = '';
i++;
if(i >= images.length){
i = 0;
}
images[i].className = 'showed';
}
</script>
</body>
</html>
CSS:
html, body, ul, li{
margin: 0;
padding: 0;
}
#gallery {
width: 860px;
margin: 0 auto;
text-align: center;
}
#gallery .photos {
position: relative;
height: 670px;
}
#gallery .photos img{
width: 100%;
position: absolute;
left: 0;
opacity: 0;
transition: opacity 1s;
}
#gallery .photos img.showed{
opacity: 1;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Paveikslėlių galerija</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gallery">
<div class="photos">
<img src="img/agriculture-cornfield-field-7601.jpg" class="showed">
<img src="img/agriculture-countryside-field-7976.jpg">
<img src="img/autumn-dawn-daylight-401080.jpg">
<img src="img/backlit-dawn-daylight-257092.jpg">
<img src="img/backlit-dawn-dusk-219890.jpg">
<img src="img/city-clouds-hills-94649.jpg">
<img src="img/environment-forest-green-141233.jpg">
<img src="img/firs-fog-forest-6858.jpg">
<img src="img/forest-sun-sunlight-9020.jpg">
</div>
<div class="buttons">
<input type="button" value="Atgal" class="prev">
<input type="button" value="Pirmyn" class="next">
</div>
</div>
<script>
var btn_prev = document.querySelector('#gallery .buttons .prev');
var btn_next = document.querySelector('#gallery .buttons .next');
var images = document.querySelectorAll('#gallery .photos img');
var i=0;
btn_prev.onclick = function(){
images[i].className = '';
i--;
if(i < 0){
i = images.length - 1;
}
images[i].className = 'showed';
}
btn_next.onclick = function(){
images[i].className = '';
i++;
if(i >= images.length){
i = 0;
}
images[i].className = 'showed';
}
</script>
</body>
</html>
CSS:
html, body, ul, li{
margin: 0;
padding: 0;
}
#gallery {
width: 860px;
margin: 0 auto;
text-align: center;
}
#gallery .photos {
position: relative;
height: 670px;
}
#gallery .photos img{
width: 100%;
position: absolute;
left: 0;
opacity: 0;
transition: opacity 1s;
}
#gallery .photos img.showed{
opacity: 1;
}
Komentarai
Rašyti komentarą