Skocz do zawartości
  • 0

Slider zdjęć w jQuery


KRZYSZT0FSLENDER
 Udostępnij

Pytanie

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 

Odnośnik do komentarza
Udostępnij na innych stronach

8 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

  • 0

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

Odnośnik do komentarza
Udostępnij na innych stronach

  • 0

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

Edytowane przez KRZYSZT0FSLENDER
Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Zaloguj się poniżej.

Zaloguj się
 Udostępnij

  • Ostatnio przeglądający forum Slider zdjęć w jQuery   0 użytkowników
    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...