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

-3

私はデータベースからすべての画像を取得する次のコードを持っています。これらの画像はすべて3行に表示され、次の行が開始されます。私は、データベースからのすべての画像を取り、それらを表示する画像スライダーが必要です。 JavaScriptコードを含むヘルプは、私が本当にうまくいきませんので非常に役に立ちます。ありがとう！MySQLデータベースの画像をJavaScript画像スライダに表示するにはどうすればよいですか？

$sql = "SELECT FILE_NAME FROM images LIMIT 0,6"; 
    $result = mysqli_query($conn, $sql) or die("bad request: $sql"); 
     $i = 0; 
    while($row = mysqli_fetch_assoc($result)) { 
     if($i%3 == 0) 
     { 
      echo "<tr>"; 
     } 
     echo"<td><img src='user_data/{$row['FILE_NAME']}' width=200 height=200></td>"; 
     if($i%3 == 2) { 
      echo"</tr>"; 
     } 
    }

出典

2017-08-16 hussnain aftab

Welcome to StackOverflow！ご質問を投稿する前に、問題を調査し、解決しようとしていることが予想されます。あなたはまだ特定の問題がある場合、あなたはこれまでに試したことの詳細を含む特定の質問を投稿することができます。 [Stack Overflowユーザーの研究努力の程度]（https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users）と[ [良い質問をするにはどうすればいいですか]（https://stackoverflow.com/help/how-to-ask） – FluffyKitten

ここには非常に基本的な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>

出典

2017-08-18 12:20:53 FilmFiddler

PMによるリクエストの明確化：最初のデータベースイメージがJavaScriptによって最初に表示されます。イメージタグのsrc属性。チャンスごとに大きなスローロードイメージ（最初のイメージショータイムを減らす可能性がある）がある場合は、load setTimeoutコールでtime変数を増やしてみてください。データベースの最初のイメージだけが必要な場合は、クエリ文字列の最後にLIMIT 1を追加します。 PHPとJsの両方のスクリプトは問題なく最初のイメージのみを取得します。 – FilmFiddler

src属性を削除すると「slideshow」と書かれているだけです。画像が表示されるまで5秒間待たなければなりません。私は私が理解できない最初の画像からスライドショーを開始したい、助けてください、ありがとう！ –

最初の遅延は、コードの終わり近くにある2番目のsetTimeoutコールの時間引数を変更するだけで変更されます。時間の値は5000（ミリ秒）なので、その呼び出しをsetTimeout（changeImg、50）のように変更します。ローカルサーバー上ですぐに最初のイメージが表示されます。実際のサーバーでは、ページの読み込み時にスライドショーを即座に実行することは、特に画像が多い場合は、接続が遅いユーザーには最適ではない可能性があります。 5秒の遅延は、いくらかの予負荷が発生することを可能にすることを意図していた。 – FilmFiddler

-1

https://www.w3schools.com/howto/howto_js_slideshow.asp

スライドショーでは、すでに取り組んでイメージタグを持っているので、あなたがしなければならないすべては、あなたのスライドショーの親要素に発生するものをイメージタグを追加している、あります。

私は古くからの古典的なphpエコー法を使用する代わりに、js/jqueryを学習することを推奨します。これは汚いものと古いものです。

出典

2017-08-16 03:01:16 Merigold

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

答えて

関連する問題