Slider zdjęć w jQuery

KRZYSZT0FSLENDER · 25 Grudnia 2018

Witam mam taki problem chcem zrobić pokaz slidów mam 5 obrazów i chcem aby one zmieniały się co 15 sekund. Chodzi mi o to też aby po najechaniu były strzałki to rozwiaże sam z ich pokazywaniem ale chcem aby jedna dawała slide +1 a druga -1 i aby były na dole kropki po kliknięciu w które przenosiły by do konkretnego slidu

CisPK · 4 Stycznia 2019

W ramach przypominania sobie czystego JS napisałem coś w miare zgodnego z twoim opisem. Nie powinieneś mieć problemów z przepisanie tego do jQuery i dostosowaniem pod siebie :P pododawałem jeszcze pare komentarzy, żeby było w miare zrozumiałe co od czego jest.

<!doctype html>
<html>
<head>

  <style>
    #container {
      width: 470px;
      height: 339px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
    }

    #slide {
      width: 470px;
      height: 339px;
      margin-left: auto;
      margin-right: auto;
    }

    #arrowLeft {
      font-size: 102px;
      position: absolute;
      top: 50%;
      left: 0;
      cursor: pointer;
    }

    #arrowRight {
      font-size: 102px;
      position: absolute;
      top: 50%;
      right: 0;
      cursor: pointer;
    }

    #arrowLeft:hover {background-color: gray;}
    #arrowRight:hover {background-color: gray;}

    .dotCont {
      text-align: center;
    }

    .dot {
      border: 15px solid black;
      display: inline-block;
      border-radius: 50%;
    }

    .dot:hover {
      border: 15px solid red;
    }
  </style>
</head>
<body onload="switchImg()">

  <div id="container">
    <div id="slide"></div>
    <div id="arrowLeft" onclick="nextImg(-1)"><</div>
    <div id="arrowRight" onclick="nextImg(1)">></div>
  </div>

  <div class="dotCont">
    <div class="dot" onclick="dot(0)"></div>
    <div class="dot" onclick="dot(1)"></div>
    <div class="dot" onclick="dot(2)"></div>
  </div>

	<script>
    // tablica z obrazkami
    var num = ["img1.png", "img2.png", "img3.png"];
    var inter = setInterval(switchImg, 2000);
    var x = document.getElementById("slide");
    var flag = 0;

    // domyślny obrazek na start
    x.innerHTML = "<img src=" + num[0] + ">";

    function dot(i) {
      clearInterval(inter); // wyłączenie losowej zmiany co 15 sekund po naciśnięciu elementu
      flag = i;
      x.innerHTML = "<img src=" + num[i] + ">";
    }

    // zmiana obrazków za pomocą strzałek + blokada
    function nextImg(n) {
      clearInterval(inter); // wyłączenie losowej zmiany co 15 sekund po naciśnięciu elementu
      flag = flag + n;

      if (flag<0) flag = 0;
      else if (flag>2) flag = 2;

      x.innerHTML = "<img src=" + num[flag] + ">";
    }

    // zmieniamy obrazek na inny losowy z tablicy num[] co 15 sekund
    function switchImg() {
      var long = num.length;
      var ransom = Math.floor(Math.random() * long);

      if (ransom==flag) {
        switchImg();
      } else {
        flag = ransom;
        x.innerHTML = "<img src=" + num[flag] + ">";
      }
      inter;
    }
	</script>
</body>
</html>

//na przyszłość: dłuższy kod, który dodatkowo zawiera także HTML i CSS lepiej jest wstawiać na codepen.io lub podobny serwis @carbonx

KRZYSZT0FSLENDER · 31 Grudnia 2018

To właśnie mi chodzi o Jquery a strone właśnie chcem zrobić tak aby bootstrapa nie było bo on ustawia tylko do 1200px szerokości i to do dupy wygląda na 4k. Zreszto bodajrze YT jest na podobnej zasadzie robione i na monitorze 4k musze powiększać aby co kolwiek widzieć

CisPK · 6 Stycznia 2019

Od tego jest, jQuery, można wszystko zrobił łatwiej, szybciej i efektywniej niż w czystym JS. Chodziło mi głównie, żeby przedstawić Ci samą ideę jak to wykonać ^^

KRZYSZT0FSLENDER · 30 Grudnia 2018

Ale tak troche nie o to mi chodziło ten plugin nie zabardzo dobrze działa z obrazami i ustala samoczynnie width i height elemntów

KRZYSZT0FSLENDER · 6 Stycznia 2019

No narazie to jest na czystych obrazkach a pozniej przerobie to aby obslugiwalo klasy

CodeW · 30 Grudnia 2018

Myślę, że najprościej będzie zastosować bootstrap-carousel, ale to już kwestia czy takie podejście Ci będzie odpowiadało. Banalne do zastosowania. Ewentualnie cos na jquery spróbuj.

CodeW · 29 Grudnia 2018

Poszukaj coś w necie pod hasłem "gallery carousel javascript".

Jakies 1,5 sekundy szukania.

http://kenwheeler.github.io/slick/

KRZYSZT0FSLENDER · 6 Stycznia 2019

Wiesz co ja napisałem coś na bazie twojego skryptu tylko to skruciłem i to o wiele

Cytat

var SliderNum = 0;
var StartSlide = 0;
var SliderList = 5;
var SliderNum;
var i;

function nextIMG(){
if(SliderNum>SliderList-1)SliderNum=StartSlide;
/*if(SliderNum<5)*/SlideNum = SliderNum+1;
SliderNum = SliderNum+1;
var Image = "<img class=\"SliderImage\" src=\"IMG/Slider/SliderIndex/Slide" + SlideNum + ".jpg\" />";
$('.Slider').html(Image);
}
function backIMG(){
if(SliderNum<2)SliderNum=SliderList+1;
/*if(SliderNum<5)*/SlideNum = SliderNum-1;
SliderNum = SliderNum-1;
var Image = "<img class=\"SliderImage\" src=\"IMG/Slider/SliderIndex/Slide" + SlideNum + ".jpg\" />";
$('.Slider').html(Image);
}

function SlideNumBer(i){
SlideNum = i;
SliderNum = i;
var Image = "<img class=\"SliderImage\" src=\"IMG/Slider/SliderIndex/Slide" + SlideNum + ".jpg\" />";
$('.Slider').html(Image);
};

function Slider(){
SliderNum++; if(SliderNum>SliderList-1)SliderNum=StartSlide+1;
var SlideNum = SliderNum;
var Image = "<img class=\"SliderImage\" src=\"IMG/Slider/SliderIndex/Slide" + SlideNum + ".jpg\" />";

$('.Slider').html(Image);

setTimeout("Slider()", 5000);
}

Ale pomysł dobry i dzięki za pomoc masz like ode mnie

Zaloguj się

👋 Witaj na MPCForum!

Slider zdjęć w jQuery

Pytanie

KRZYSZT0FSLENDER

KRZYSZT0FSLENDER

8 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

CisPK

CisPK

KRZYSZT0FSLENDER

KRZYSZT0FSLENDER

CisPK

CisPK

KRZYSZT0FSLENDER

KRZYSZT0FSLENDER

KRZYSZT0FSLENDER

KRZYSZT0FSLENDER

CodeW

CodeW

CodeW

CodeW

KRZYSZT0FSLENDER

KRZYSZT0FSLENDER

Zarchiwizowany