Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: przewijanie reklam
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
pys1986
Witam, chciałbym zrobić na swoją strone na dole poziomy pasek z przewijanymi w kółko reklamami, ale niewiem jak sie do tego zabrać sad.gif niestety javascript`u nieznam za bardzo sad.gif proszęo jakieś podpowiedzi i może przykłady smile.gif
Ziom73
Czy może chodzi o to? :
  1. <marquee>Tu daj menu</marquee>


Źródło: http://www.kurshtml.boo.pl/html/animacja_m...multimedia.html

Pozdrawiam.
TrevorGryffits
Marquee?! Zło:P

Użyj jQuery. Tutaj znajdziesz dokładniejsze informacje
pys1986
o to mi chodziło smile.gif

ale mam teraz pytanie odnośnie " jQuery News Ticker": jak zapętlić ten pasek - chodzi mi o to że jak przejadą wszystkie reklamy to dopiero gdy jest czysto zaczynają jechać od nowa a ja bym chciał żeby za ostatnią od razu jechała pierwsza smile.gif
petrrr
A odpiszę, bo akurat dzisiaj robiłem coś bardzo podobnego. smile.gif
Ja skorzystałem z prototype-carousel.
Zobacz, może wykorzystasz.
Jest tam też opcja 'circular' dzięki której zrobisz to co chcesz, czyli przewijanie reklam w kółko.
pys1986
a jak zrobiłeś żeby to się płynnie przesuwało ?
petrrr
Jeśli pytasz o tego prototype carousela, to w trakcie inicjowania efektu musisz podać odpowiednie opcje.
Np tak:
  1. new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control', 'a.carousel-jumper'), {duration: 0.5, circular: true, auto: true, frequency: 2});

duration to czas animacji,
circular: true oznacza że ma kręcić się w kółko
auto: true oznacza, że nie ma automatycznie zmieniać slajdy
frequency: 2 oznacza, że slajd jest wyświetlany 2 sek

BARDZO WAŻNE:
Jeżeli używasz opcji circular, to ostani slajd musisz wstawić taki jak pierwszy, w przeciwnym wypadku po ostatnim od razu wyświetli się slajd nr 2.
Przykład:
  1. <div id="carousel-wrapper">
  2. <div id="carousel-content">
  3. <div class="slide">slajd 1</div>
  4. <div class="slide">slajd 2</div>
  5. <div class="slide">slajd 3</div>
  6. <div class="slide">slajd 4</div>
  7. <div class="slide">slajd 5</div>
  8. <div class="slide">slajd 6</div>
  9. <div class="slide">slajd 1</div>
  10. </div>
  11. </div>
pys1986
no to już działa ale teraz mam jeszcze problem z:

rozszerzyłem sobie pasek na 960px i puszczam obrazki po 240px czyli mieszczą się 4 na raz, i pojawiają się po kolei 1,2,3,4,5,1 ale gdy ostatni "1" dojedzie do końca to pojawia się dopiero reszta zaraz za nim sad.gif robi sie po prostu chwilowa przrwa sad.gif
petrrr
Na pewno to też jest do zrobienia.
Wydaje mi się, że powinieneś odpowiednio ustawić opcję 'visibleSlides' i być może powtórzyć na końcu więcej niż jeden slajd zeby zlikwidować tę lukę.
Poczytaj dokładnie na temat wszystkich opcji tutaj http://code.google.com/p/prototype-carousel/.
Są tam też przykłady. Zwróć uwagę w szególności na ten zamieszczony w zakładce 'Example 2' - tam właśnie jest zrobione wyświetlanie kilku slajdów jednocześnie.
pys1986
niestety próbowałem już tych wszystkich opcji i nic sad.gif


edit:
a może tu trzeba coś zmienić (carousel.js):
  1. next: function () {
  2. if (this.current) {
  3. var currentIndex = this.current._index;
  4. var nextIndex = (this.slides.length - 1 == currentIndex) ? (this.options.circular ? 0 : currentIndex) : currentIndex + 1;
  5. } else {
  6. var nextIndex = 1;
  7. }
  8.  
  9. if (nextIndex == 0 && this.options.circular && this.options.effect != 'fade') {
  10. this.scroller.scrollLeft = 0;
  11. this.scroller.scrollTop = 0;
  12. nextIndex = 1;
  13. }
  14.  
  15. if (nextIndex > this.slides.length - (this.options.visibleSlides + 1)) {
  16. nextIndex = this.slides.length - this.options.visibleSlides;
  17. }
  18.  
  19. this.moveTo(this.slides[nextIndex]);
  20. },


no więc nadal poszukuje skryptu do przewijania rekalm sad.gif
petrrr
Hmmm, trudno powiedzieć czy trzeba cos zmieniac w carousel.js. Nie wgłębiałem się w ten plik, jako że skrypcik bez problemu sprostał moim wymaganiom.
Z opisu wydawać by się mogło, że wystarczy odpowiednio wykorzystać opcje.
Więc może zamiast szarpać się z JS po prostu użyj do tego celu flasha?...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.