Forum PHP.pl > [inne][PHP]Losowe wyświetlanie obrazków

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [inne][PHP]Losowe wyświetlanie obrazków

Mati010

9.08.2014, 22:36:25

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

luniak

10.08.2014, 14:17:49

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 
 
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <style>
    #wrapper {width: 500px; height: 100px; overflow: hidden;}
    ul {list-style-type: none; margin: 0px; padding: 0px; width: 100%;}
    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;  }
    #result {width: 100px; height: 100px;}
  </style>
</head>
<body>
  <div id="wrapper">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
    </ul>
 
  </div><br>
  <button id="button">start</button><br>
  Wygrywa:
  <div id="result">....</div>
  <script>
    $(document).ready(function(){
      $("ul > li:lt(5)").clone().appendTo("ul")
      $("ul").css({width: ($("ul > li").length * 100)})
      $("#button").click(function(){
        if($(this).text()==="start"){
          stop = false
          $(this).text("stop");
          $("#result").empty();
          scroll()
        }
        else {
          stop = true
          $(this).text("start");
 
        }
      });
    });
    var stop = false;
    var speed = 50
    function scroll() {
      count = parseInt($("ul > li").first().css("left"))
      if(count < 0){ count = count / -100;}
      if(stop){show(count); return false;}
      if(count === ($("ul > li").length - 5)){count =0; $("ul > li").css({left: "0px"});}
 
      $("ul > li").slice(1).animate({left:"-"+((count+1)*100)+"px"}, speed, "linear");
      $("ul > li").first().animate({left:"-"+((count+1)*100)+"px"}, speed, "linear", function(){scroll();} );
    }
    function show(count){
      count = count + 2;
      $("ul > li").slice(count,(count+1)).clone().css({left: "0px"}).appendTo("#result");
    }
  </script>
</body>
</html>
 
[HTML] pobierz, plaintext

Mati010

18.08.2014, 17:40:56

Dokładnie o to chodziło wielkie dzięki.

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.