• 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

Fiszki IT
Fiszki IT
+1 głos
89 wizyt
pytanie zadane 14 lipca w JavaScript przez xjafajx Użytkownik (750 p.)
edycja 14 lipca 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 przez pablop76 VIP (117,520 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 przez VBService VIP (120,980 p.)
edycja 18 lipca 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 przez xjafajx Użytkownik (750 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 przez VBService VIP (120,980 p.)

@xjafajx, patrz powyżej, poprawione.  wink

komentarz 21 lipca przez xjafajx Użytkownik (750 p.)
edycja 21 lipca 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 118 wizyt
pytanie zadane 12 września 2019 w JavaScript przez grudzin Początkujący (320 p.)
+4 głosów
1 odpowiedź 676 wizyt
Porady nie od parady
Forum posiada swój własny serwer Discord, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

84,721 zapytań

133,527 odpowiedzi

295,919 komentarzy

55,997 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...