Š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ų