Peršokti prie turinio


Toggle shoutbox Diskusijos Open the Shoutbox in a popup

@  MantisW : (28 October 2019 - 09:28 PM) SANG.lt - San Andreas Naujasis Gyvenimas  Paskelbta atranka į cheat'erių gaudytojus. Vyksta atrankos į direktorius!   Serveris nestartavęs, todėl užsukite į forumą www.SANG.lt ir TeamSpeak, kurio IP: ts.SANG.lt
@  bobbymsweeney : (23 October 2019 - 05:29 PM) I work as a marketing specialist and staff author at Externetworks which is a pioneer in Managed Technology Services with over 17+ years of experience in providing end-to-end solutions featuring design, deployment and 24*7 support to top IT companies. We offer world-class managed services for businesses to stay agile & profitable. Our services include 24/7 Network Monitoring, Uptime maintenance, NOC Support, IT Helpdesk services.
@  bobbymsweeney : (23 October 2019 - 05:29 PM) I work as a marketing specialist and staff author at Externetworks which is a pioneer in Managed Technology Services with over 17+ years of experience in providing end-to-end solutions featuring design, deployment and 24*7 support to top IT companies. We offer world-class managed services for businesses to stay agile & profitable. Our services include 24/7 Network Monitoring, Uptime maintenance, NOC Support, IT Helpdesk services.
@  123 : (13 October 2019 - 12:05 PM) 3sides.lt renkami direktoriai
@  Mantiel : (06 October 2019 - 04:50 PM) www.SBLG.us.lt, forumo startas jau šiandien 18:30 lauksime visų!!! Tai pat jūsų laukia dėmesio verti rinkimai/atrankos!!
@  Mantiel : (06 October 2019 - 04:50 PM) www.SBLG.us.lt, forumo startas jau šiandien 18:30 lauksime visų!!! Tai pat jūsų laukia dėmesio verti rinkimai/atrankos!!
@  Mantiel : (06 October 2019 - 04:50 PM) www.SBLG.us.lt, forumo startas jau šiandien 18:30 lauksime visų!!! Tai pat jūsų laukia dėmesio verti rinkimai/atrankos!!
@  Mantiel : (05 October 2019 - 10:22 AM) www.SBLG.us.lt, forumo startas 10-06 18:30 lauksime visų!!!
@  Mantiel : (05 October 2019 - 10:21 AM) www.SBLG.us.lt, forumo startas 10-06 18:30 lauksime visų!!!
@  Mantiel : (05 October 2019 - 10:21 AM) www.SBLG.us.lt, forumo startas 10-06 18:30 lauksime visų!!!
@  Zeb0w : (25 September 2019 - 08:52 AM) sveiki
@  Karolizas : (26 August 2019 - 12:24 PM) Esat nueikit i i mano postą
@  DiEvil : (25 August 2019 - 12:13 AM) Kaip suprantu, cia nei gyvos dvasios :D
@  DiEvil : (19 August 2019 - 12:15 PM) Ieskomas zmogus nusimanantis apie cs 1,6 serverius. Taipogi gal yra norinciu prisijungti prie komandos.. Palaciau i PM
@  r y a n a s. : (19 August 2019 - 08:51 AM) Yoo, sveiki
@  #Kenichi : (12 August 2019 - 10:12 AM) Kaip viskas pasikeitė po tiek laiko :D
@  Jessy_Torreto : (21 December 2018 - 11:22 PM) cs.fresko-chata.lt public 89.40.3.123:27015 užsukit
@  123 : (21 December 2018 - 12:14 PM) Sveiki, norime pranešti, kad Country-Life.lt forumas startavo, bei laukia taves!   - Renkamas direktorių prižiūrėtojas!   - Nori tapti žinomu, bei įgauti patirties tam tikrame poste? Aš jums siūlau prisijungti ir išbandyti save.   - Per diena surenkame ~35 žaidėjus ONLINE forume!  - Serverio startas jau sausį!   Projekto Informacija:  Forumas: www.Country-Life.lt✔️
@  123 : (21 December 2018 - 12:13 PM) Sveiki, norime pranešti, kad Country-Life.lt forumas startavo, bei laukia taves!   - Renkamas direktorių prižiūrėtojas!   - Nori tapti žinomu, bei įgauti patirties tam tikrame poste? Aš jums siūlau prisijungti ir išbandyti save.   - Per diena surenkame ~35 žaidėjus ONLINE forume!  - Serverio startas jau sausį!   Projekto Informacija:  Forumas: www.Country-Life.lt✔️
@  #Kenichi : (21 December 2018 - 11:36 AM) Reklamuoti šaukykloje griežtai draudžiama! Gausite ban'a 7 dienom.

Nuotrauka

Paprastas skaidrių demonstravimas svetainėje [JS/HTML/CSS]


  • Please log in to reply
6 atsakymai į šią temą

#1 ATSIJUNGĘS   #BenasK

#BenasK

Narių medaliai

        

25 March 2017 - 02:32 PM

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

LIVE DEMO

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)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</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ų

  • 1

#2 ATSIJUNGĘS   #Dissco

#Dissco

    Pgr. Administratorius

  • Administratorius
  • 278 Pranešimai

Narių medaliai

              

25 March 2017 - 03:28 PM

Trūksta paaiškinimų :D


  • 0

Paveiksliukas


#3 ATSIJUNGĘS   Marsh'as

Marsh'as

25 March 2017 - 09:20 PM

Bšk neaiškus tiek kodai, bet +rep davaiu už pastangas.


  • 0

#4 ATSIJUNGĘS   #BenasK

#BenasK

Narių medaliai

        

25 March 2017 - 09:28 PM

Trūksta paaiškinimų :D

 

 

Bšk neaiškus tiek kodai, bet +rep davaiu už pastangas.

Rytoj čia bus paeditinta, bus paaiškinta viskas (HTML ir JS failuose, nes CSS tai ten nėr ką aiškint :D )


  • 0

#5 ATSIJUNGĘS   George'Tevadze

George'Tevadze
  • LocationLietuva/Telšiai

29 March 2017 - 08:32 PM

Šaunuolis,kad kuri tokias temas.Pakviečiau tave į skype priimk.


  • 0

#6 ATSIJUNGĘS   #BenasK

#BenasK

Narių medaliai

        

02 May 2017 - 12:12 PM

Šaunuolis,kad kuri tokias temas.Pakviečiau tave į skype priimk.

Sveikas, tik dabar pamačiau tavo atsakymą :D Dėkui (y) Tavo kvietimo kaip ir nemačiau. Duok savo skype, pakviesiu ;)


  • 0

#7 ATSIJUNGĘS   Lietuvis!

Lietuvis!

02 May 2017 - 06:19 PM

  • Žiauriai gerai, kad yra 'live demo'

  • 0




0 vartotojai(-ų) skaito šią temą

0 nariai(-ių), 0 svečiai(-ių) ir 0 slapti(-ų) nariai(-ių)