Šioje pamokoje išmoksite padaryti tikrai paprastą skaidrių demonstravimą savo svetainėje. Nuotraukų galite pridėti kiek norite, tačiau aš darysiu su trijomis (1 nuotraukos dydis - 1000px x 350px). Skaidrių demonstravimui padaryti naudosime šias kalbas: JAVASCRIPT, HTML, CSS.
Aš naudosiu šiuos failų pavadinimus (jei kopijuosite visus kodus, siūlau naudoti mano pavadinimus bei viską talpinti viename aplanke, kad nekiltų bėdų):
- HTML dokumentui - index.html
- CSS dokumentui - main.css
- Javascript dokumentui - slider.js
Darbą dirbu naudojantis programa Sublime Text 2 nuotraukos - 1000x350
Pirmiausia mums reikia pasidaryti paprastą HTML puslapį. Paprasčiausio HTML puslapio kodas:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"> <!-- Nuoroda į CSS failą -->
<script type="text/javascript" src="slider.js"></script> <!-- Nuoroda į Javscript failą -->
<meta charset="UTF-8" /> <!-- Teksto koduotė -->
<title>Skaidrės</title> <!-- Skirtuko pavadinimas -->
</head>
<body>
<h1>Skaidrės</h1>
</body>
</html>
Ir viskas. Pradžiai daugiau nieko nereikia. Dabar einame į CSS, ten uždėsime puslapiui fono spalvą, bei pakeisime antraštės (turinys HTML faile tarp žymių <h1>) teksto šriftą. Šriftą keisiu į integruotą visose naršyklėse. Jei norite galite susidėti savo. Kodas CSS failui:
body {
background-color: lightblue;
}
h1 {
font-family: Verdana;
}
JS kodas:
var slideIndex = 1; //Nurodomas kintamasis, kuri skaidrė turi būti pirma
showSlides(slideIndex); //Nurodoma, kad skaidrių rodymas turi prasidėti nuo kintamojo slideIndex reikšmės
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
CSS:
/* **********************
body visas
********************** */
body {
background-color: lightblue;
}
h1 {
font-family: Verdana;
}
/* **********************
sliderio
********************** */
* {box-sizing:border-box}
/* **********************
Slideshow konteineris
********************** */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
/* **********************
Pirmyn ir atgal mygtukai
********************** */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* **********************
Mygtuko "kitas" pozicija
********************** */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* **********************
Uždėt juodą foną su trupučiu permatomumo
********************** */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* **********************
Aprašymų tekstas
********************** */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* **********************
Skaičių tekstai (1/3) ir etc
********************** */
.skaiciai {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* **********************
Taškiukai ir kt. indikatoriai
********************** */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* **********************
Šešėlių animacija
********************** */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="slider.js"></script>
<meta charset="UTF-8" />
<title>Skaidrės</title>
</head>
<body>
<h1>Skaidrės</h1>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="skaiciai">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Užrašas</div>
</div>
<div class="mySlides fade">
<div class="skaiciai">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Užrašas</div>
</div>
<div class="mySlides fade">
<div class="skaiciai">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Ir užrašas paskutinei skaidrei</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</body>
</html>
Tiesiog, kad Jums būtų lengviau sudėjau visus kodus. Pagrindą darymo kaip ir žinote, jei kažkas bus neaišku galėsite "pagūglinti". Taip pat galite klausti manęs šioje temoje, asmeninėse žinutėse pawno.lt ir/ar skype living.indream1
P.s. nenustebkite dėl angliškų ID, class. Tiesiog, kai kažką koduoju/programuoju mėgstu rašyti angliškus pavadinimus.
+REP jei panaudojote/patiko/padėjau 
Šį pranešimą redagavo #BenasK: 02 May 2017 - 12:15 PM
Padaryta dalis funkcijų aprašymų
