Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [ AJAX ] Samoczynnie zmieniające się newsy
Forum PHP.pl > Forum > XML, AJAX
Kamil Jura
16.12.2009, 21:02:43
Witam serdecznie.

Szukałem już w internecie czegoś takiego, jednak nie wiedziałem dokładnie pod jaką frazą mam szukać - nie znalazłem.

Z JS jestem kiepski, z technologią AJAX mam mało wspólnego.




Proszę o pomoc w następującej sprawie. Każdy chyba widział jak sobie latają newsy np. na Wirtualnej Polsce. ( te 4 newsy w jednym boxie co się zmieniają same ). Jeśli ktoś nie widział, to polecam zobaczyć smile.gif

Chciałbym umieścić na swojej stronie coś takiego, jednak nie potrafię tego napisać. Jeśli ktoś może podesłać gotowy kod, albo naprowadzić na jakieś wskazówki, lub ew. ktoś znalazł w internecie takie rozwiązanie, to byłbym bardzo wdzięczny jeśli ta osoba będzie w stanie mi pomóc.




Z Góry dziekuję i pozdrawiam

Kamil Jura

lukasz_os
16.12.2009, 23:23:49
Nie napiszę całego kodu bo to trochę by zajęło. Przedstawię ogólnie ideę działania. I wcale te newsy nie musza być ładowane ajaxem.

Więc w skrócie możesz zrobić to tak:

W jednym divie(kontenerze) umieszczasz 4 (jak na wp) divy o jednakowej klasie. W nich umieszczasz co tam chcesz: grafikę, linki, tekst). Jednemu nadajesz display:block; reszcie display:none;. Za pomocą Javascriptu sprawdzasz który z tych divów jest widoczny ustawiasz mu display:none; a następnemu display:block; i tak na zmianę dzięki funkcji z odpowiednim Timeoutem. Jak będzie wskazywał ostatni div to pokazuj pierwszy itd. Funkcję zmieniającą możesz również przypisać do linków czy buttonów o ile chcesz mieć nawigację pod spodem.

Pozdrawiam.
Kamil Jura
17.12.2009, 16:21:45
Kod HTML to wiem jaki musi być. Nie wiem jak napisać takie funkcje w JS a mam mało czasu. Mógłbyś podać jakiś zarys kodu, jakiś przykład ? To wtedy sobie poradzę.




Mimo wszystko dziękuję za pomoc smile.gif

lukasz_os
17.12.2009, 23:38:43
Możesz do tego wykorzystać bibliotekę jQuery.

Cały kod powinien wyglądać mniej więcej tak:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2.  
  3. <html>
  4. <head>
  5. <title>TEST SLIDERA</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
  7. <meta name="author" content="lukasz_os" >
  8. <script type="text/javascript" src="jquery.js"></script>
  9. <script type="text/javascript">
  10. function rotate(){
  11.     last=$("#container .news").index($('.news:last')[0]);
  12.     ind=$("#container .news").index($('.news:visible')[0]);
  13.     $('.news').eq(ind).hide();
  14.     if(ind==last){
  15.     ind="0";
  16.     }
  17.     else
  18.     {
  19.     ind++;
  20.     }    
  21.     $('.news').eq(ind).show();
  22. }
  23.     $().ready(function(){
  24.         $('#container .news:first').show();
  25.         setInterval("rotate()",2000);
  26.     });
  27.     </script>
  28.     <style type="text/css">
  29. * {
  30.     margin:0;
  31.     padding:0;
  32. }
  33. body {
  34.     background:#ffffff;
  35.     color:#000;
  36. }
  37. .news {
  38.     width:300px;
  39.     height:200px;
  40.     border:1px solid #000;
  41.     display:none;
  42. }
  43. #container {
  44.     margin:20px;
  45.     width:302px;
  46.     height:202px;
  47. }
  48.     </style>
  49. </head>
  50.  
  51. <body>
  52.     <div id="container">
  53.         <div class="news">
  54.             div 1
  55.         </div>
  56.         <div class="news">
  57.             div 2
  58.         </div>
  59.         <div class="news">
  60.             div 3
  61.         </div>
  62.         <div class="news">
  63.             div 4
  64.         </div>
  65.     </div>
  66. </body>
  67. </html>
[HTML] pobierz, plaintext


Testowane i działa smile.gif W razie jakichkolwiek pytań pisz smile.gif

Pozdrawiam.
Kamil Jura
20.12.2009, 19:32:37
A jak do tego dopisać zmiane tego newsa po kliknieciu np numerkaj jakiegoś ? Bo nie bardzo wiem jak to zrobić. Wiem, że to się jakoś getelementbyid robiło, ale nie pamiętam jak.

Niestety powyższy przykład nie działa ... jak się okazało ..... czy możesz coś na to poradzić ? Na początku skopiowałem ten kod i przerobiłem go na swoje potrzeby. Nie zadziałało. Myślę sobie hmmm.... skopiuję go i odpalę. Skopiowałem i dokładnie ten kod odpaliłem w przeglądarce. Dalej nic ...

misiek08
20.12.2009, 21:21:24
A ściągnąłeś bibliotekę jQuery do tego samego katalogu co ten plik HTML?
Kamil Jura
20.12.2009, 22:52:12
O kurde ... heeh przepraszam ... ja nie zauważyłem, że tam jest jQuery. Dobra mój błąd smile.gif Pozdrawiam ;p;p Dzięki wielkie
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.