Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [inne][PHP]Losowe wyświetlanie obrazków
Mati010
post 9.08.2014, 22:36:25
Post #1





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 2.02.2009
Skąd: gliwice

Ostrzeżenie: (0%)
-----

Witajcie, mam pytanie ponieważ nie wiem jak się za to zabrać.
Mianowicie chcę zrobić losowe wyświetlanie obrazków (nie wiem czy dobrze to nazwałem).
Chcę, aby obrazki poruszały się po prostu tzw. scroll poziomy (tylko 5 obrazków widocznych) i po kliknięciu przycisku STOP zatrzymują się i ten środkowy obrazek wygrywa (tak, jakby ruletka).

Nie wiem czy dobrze wytłumaczyłem, jeżeli nie to przepraszam axesmiley.png

Ten post edytował Mati010 9.08.2014, 22:37:41
Go to the top of the page
+Quote Post
luniak
post 10.08.2014, 14:17:49
Post #2





Grupa: Zarejestrowani
Postów: 171
Pomógł: 36
Dołączył: 12.01.2008
Skąd: Puszcza Mariańska

Ostrzeżenie: (0%)
-----

O ile Cię rozumiem to bardziej potrzebujesz rozwiązania w JS/CSS3 niż w PHP

Tu masz na szybko napisany przykład:

[HTML] pobierz, plaintext 
  1.  
  2. <html>
  3. <head>
  4. <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  5.   <style>
  6.     #wrapper {width: 500px; height: 100px; overflow: hidden;}
  7.     ul {list-style-type: none; margin: 0px; padding: 0px; width: 100%;}
  8.     li {list-style-type: none;  float: left; width: 90px; height: 90px; margin: 5px; background-color: red; text-align: center; line-height: 75px; font-size: 30px; position: relative; left: 0px;  }
  9.     #result {width: 100px; height: 100px;}
  10.   </style>
  11. </head>
  12. <body>
  13.   <div id="wrapper">
  14.     <ul>
  15.       <li>1</li>
  16.       <li>2</li>
  17.       <li>3</li>
  18.       <li>4</li>
  19.       <li>5</li>
  20.       <li>6</li>
  21.       <li>7</li>
  22.       <li>8</li>
  23.       <li>9</li>
  24.       <li>10</li>
  25.       <li>11</li>
  26.     </ul>
  27.  
  28.   </div><br>
  29.   <button id="button">start</button><br>
  30.   Wygrywa:
  31.   <div id="result">....</div>
  32.   <script>
  33.     $(document).ready(function(){
  34.       $("ul > li:lt(5)").clone().appendTo("ul")
  35.       $("ul").css({width: ($("ul > li").length * 100)})
  36.       $("#button").click(function(){
  37.         if($(this).text()==="start"){
  38.           stop = false
  39.           $(this).text("stop");
  40.           $("#result").empty();
  41.           scroll()
  42.         }
  43.         else {
  44.           stop = true
  45.           $(this).text("start");
  46.  
  47.         }
  48.       });
  49.     });
  50.     var stop = false;
  51.     var speed = 50
  52.     function scroll() {
  53.       count = parseInt($("ul > li").first().css("left"))
  54.       if(count < 0){ count = count / -100;}
  55.       if(stop){show(count); return false;}
  56.       if(count === ($("ul > li").length - 5)){count =0; $("ul > li").css({left: "0px"});}
  57.  
  58.       $("ul > li").slice(1).animate({left:"-"+((count+1)*100)+"px"}, speed, "linear");
  59.       $("ul > li").first().animate({left:"-"+((count+1)*100)+"px"}, speed, "linear", function(){scroll();} );
  60.     }
  61.     function show(count){
  62.       count = count + 2;
  63.       $("ul > li").slice(count,(count+1)).clone().css({left: "0px"}).appendTo("#result");
  64.     }
  65.   </script>
  66. </body>
  67. </html>
  68.  
[HTML] pobierz, plaintext


Ten post edytował luniak 10.08.2014, 15:22:37


--------------------
Jeżeli ktoś na forum Ci pomógł, możesz mu podziękować klikając w opcje "Pomógł" pod jego postem!
--------------------
Go to the top of the page
+Quote Post
Mati010
post 18.08.2014, 17:40:56
Post #3





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 2.02.2009
Skąd: gliwice

Ostrzeżenie: (0%)
-----

Dokładnie o to chodziło wielkie dzięki.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 22.06.2025 - 23:58
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn