• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przełączanie stron jako slajdów w JavaScript

VPS Starter Arubacloud
+1 głos
239 wizyt
pytanie zadane 14 lipca 2021 w JavaScript przez xjafajx Użytkownik (740 p.)
edycja 14 lipca 2021 przez xjafajx

Cześć,

Poprzednie pytanie źle sformułowałem ale teraz żeby ułatwić zrozumienie o co mi chodzi udostępniam link do podglądu website.

https://codepen.io/xjafajx/pen/abJrrew

Po pierwsze:

  • na stronie znajdują się strzałki w prawo i lewo które służą do poruszania się po menu. Pomiędzy strzałkami znajduje się grafika (kliknięcie w nią powoduje przejście do danej sekcji). Moje pytanie jak zrobić aby przechodzić do sekcji następnej klikając w prawą strzałkę lub przechodzić do sekcji poprzedniej klikając strzałkę w lewo?

Po drugie:

  • Jak mogę zrobić tutaj przejście w stylu po slajdach? Czyli widoczna jest tylko ta sekcja na której się znajduję użytkownik reszta jest ukryta.

Bardzo proszę o pomoc i z góry dziękuję

2 odpowiedzi

0 głosów
odpowiedź 15 lipca 2021 przez pablop76 VIP (123,060 p.)
Z Twojego opisu wynika, że potrzebujesz zwykłego slidera. A nawigację tego slidera zaprojektować tak jak to wygląda w Twoim przykładzie.
0 głosów
odpowiedź 17 lipca 2021 przez VBService Ekspert (251,210 p.)
edycja 18 lipca 2021 przez VBService

Propozycja

do css-a dodaj

.panel {
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
}

 

[ edit ]

do js-a

// to co już masz od początku napisane
var element = document.getElementById('mobile_control');

. . .

}
var planet = ["Strona główna", "Strona 7", "Strona 6","Strona 5", "Strona 4", "Strona 3", "Strona 2", "Strona 1"];

// od tego miejsca włącznie zostaje
const planets = document.querySelectorAll('.moon');

// a to
var moon_id = 0;

function moon(direction){

  var n_planet = 8, moon_next;

  if(direction == "prev"){
    moon_next = (moon_id + 1) % n_planet;
    moon_id++;
  } else {
    if(moon_id == 0){
      moon_next = 7;
      moon_id = 7;
    } else {
      moon_next = moon_id - 1;
      --moon_id;
    }
  };

  planets.forEach( ( planet, i ) => {
    if ( i === moon_next ) {
        planet.style.visibility = 'visible';
        console.log(moon_next);
    } else {
        planet.style.visibility = 'hidden';
    }
  } );
};
planets.forEach( ( planet, i ) => {
  if ( i === 0 ) {
      planet.style.visibility = 'visible';
  } else {
      planet.style.visibility = 'hidden';
  }
} );

// Zamień na to
let moon_id = 0;
moon();

function moon(direction = null){
  const n_planet = planets.length;
  let moon_next;

  if(direction == "prev"){
    moon_next = ++moon_id % n_planet;
    if(moon_id > 7) moon_next = moon_id = 0;
  }else if(direction == "next"){
    moon_next = --moon_id % n_planet;
    if(moon_id < 0) moon_next = moon_id = 7;
  }else{
    moon_next = moon_id = 0;
  }
  
  showSlide(moon_next);
  planets.forEach( (planet) => { planet.style.visibility = 'hidden'; });  
  planets[moon_next].style.visibility = 'visible';  
}

function showSlide(id) {
  const slides = ['index', 'seventh', 'sixth', 'm_vibn', 'fourth', 'three', 'second', 'first'];  
  slides.forEach( (slide) => { $("#" + slide).css("opacity", 0); }); 
  $("#" + slides[id]).css("opacity", 1);
}

 

komentarz 17 lipca 2021 przez xjafajx Użytkownik (740 p.)
Coś z tym prev nie działa

Jak kliknę next->prev->prev->next to już napisu nie ma co widzi id=8 a max jest 7 :(

Jak to naprawić?
komentarz 18 lipca 2021 przez VBService Ekspert (251,210 p.)

@xjafajx, patrz powyżej, poprawione.  wink

komentarz 21 lipca 2021 przez xjafajx Użytkownik (740 p.)
edycja 21 lipca 2021 przez xjafajx

Ok,

A jak w stopce mam takie jakby szybkie odnośniki do tych podstron to jak zrobić żeby po kliknięciu od razu mnie przeniosło na odpowiednia podstronę?

<ul class="list-unstyled">
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#index" data-translate-id="112">Index</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#first" data-translate-id="113">First</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#second" data-translate-id="114">Second</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#three" data-translate-id="115">Three</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#fourth" data-translate-id="116">Fourth</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#fifth" data-translate-id="117">Fifth</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#sixth" data-translate-id="118">Sixth</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#seventh" data-translate-id="119">Seventh</a>
						</li>
					</ul>

Ten href mi nie działa znaczy się w linku dodaje na końcu etykietę ale nie przenosi mnie do podstrony...

Podobne pytania

0 głosów
2 odpowiedzi 250 wizyt
pytanie zadane 12 września 2019 w JavaScript przez grudzin Początkujący (320 p.)
+1 głos
2 odpowiedzi 379 wizyt
+4 głosów
1 odpowiedź 1,126 wizyt

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...