sql >> データベース >  >> RDS >> Mysql

MySQLデータベースの画像をJavaScript画像スライダーで表示するにはどうすればよいですか?

    これは非常に基本的なSlideshow-from-PHPアプリケーションです。簡単に変更または構築できます。画像名(file_name )はデータベースから取得され、画像のsrc値のJavaScript配列にプッシュされます。自分のディレクトリと一致するように、画像ディレクトリ(画像が実際に保存される場所)も指定してください。スライドショーの自動再生として、シンプルな画像プリローダーが含まれています。

    <?php
    $conn = new mysqli('localhost', 'root', 'password', 'images')
      or trigger_error('Connection failed.', E_USER_NOTICE);
    }
    $conn->set_charset('utf8');
    $paths = [];
    $dir = "./pics"; // images directory (change to suit)
    
    $stmt = $conn->prepare("SELECT `file_name` FROM `images`");
    $stmt->execute();
    $stmt->bind_result($file);
    while ($stmt->fetch()){
      $paths[] = $dir . "/" . $file;
    }
    ?>
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Slideshow from PHP</title>
    </head>
    <body>
    <div>
      <!-- may set first image src in markup so initially visible -->
      <img id="slide" src="./pics/image1.jpg" alt="slideshow">
    </div>
    <script>
    var time = 5000,    // time between images
        i = 0,              // index for changing images
        images = [],    // array of img src from PHP
        preloads = [],      // array of preloaded images
        slide = document.getElementById("slide");
    
    images = <?php echo json_encode($paths); ?>; // from PHP to Js array
    var len = images.length;
    
    function changeImg(){
      slide.src = preloads[i].src;
      if (++i > len-1){
        i = 0;
      }
      setTimeout(changeImg, time);
    }
    function preload(){
      for (var c=0; c<len; c++){
        preloads[c] = new Image;
        preloads[c].src = images[c];
      }
    }
    window.addEventListener("load", function(){
      preload();
      setTimeout(changeImg, time);
    });
    </script>
    </body>
    </html>
    



    1. 日付/時刻からSQLServerの文字列の例へのCONVERT()

    2. MySQLのテーブルと列の権限を付与する

    3. ormliteを使用したタイムスタンプ列の作成

    4. Ubuntu 9.10(Karmic)でMySQLリレーショナルデータベースを使用する