sql >> Databáze >  >> RDS >> Mysql

Jak zobrazím obrázky z databáze MySQL v posuvníku obrázků JavaScript?

Zde je velmi základní aplikace Slideshow-from-PHP. Lze jej snadno upravit nebo postavit. Názvy obrázků (file_name ) jsou staženy z databáze a poté vloženy do pole JavaScriptu s hodnotami src obrázku. Ujistěte se, že jste také určili adresář obrázků (kde jsou obrázky skutečně uloženy), aby odpovídal vašemu vlastnímu. Při automatickém přehrávání prezentace je zahrnut jednoduchý program pro předběžné načítání obrázků.

<?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. Vyhodnocení PL/SQL booleovských proměnných v Oracle Forms

  2. Jak lze tyto dva příkazy SQL zkombinovat do jednoho?

  3. Najděte všechny tabulky oddílů dědící z hlavní tabulky

  4. Snímek svazku EBS použitého pro replikaci