I wanted to make a script that automatically changes the graphics on an element, but I stood still and I have no idea what to do with it next. The script is to retrieve data from the database and include data on:

1. File paths
2. In what order should it appear
3. Display time

The script, after reaching the end of the queue, will run again

PHP CODE:

require('require/db/db.php');
$data = date('Y-m-d');
$stmt_take_date = $db->prepare("SELECT * FROM upload WHERE screen = 1 AND  end_date >= ?");
$stmt_take_date->execute([$data]);
$row_date = $stmt_take_date->fetchAll();

JS:

var arraydata = <?php echo json_encode($row_date); ?>;

    arraydata.sort(function(a,b){
        var a1 = a[5], b1 = b[5];
        if(a1 == b1) return 0;
        return a1>b1? 1:-1;
    }); 

var image = [];
    
        arraydata.forEach((ele) =>{
            console.log(ele);
            number = ele[5];
            image[number] = [ele[1],ele[4]];
            
        });

console.log(ele):

0: "17"
1: "upload/ea435404c4009768432b6f28d9c6a0bd.jpg"
2: "Test"
3: "1"
4: "2"
5: "1"
6: "2022-10-25"
end_date: "2022-10-25"
id: "17"
name: "Test"
queue: "1"
screen: "1"
time: "2"
tmp: "upload/ea435404c4009768432b6f28d9c6a0bd.jpg"

I found a lot of entries on a similar topic, but it is based on a fixed display time value

CodePudding user response：

UPD: changed

let arraydata = <?php echo json_encode($row_date); ?>;
let currentImage = -1; // the next one will be the first image (on start)
let currentTimer = 0; // time left for current image

const nextImage = () => {
   currentImage = (currentImage   1) % arraydata.length; // add 1 in circle
   currentTimer = arraydata[currentImage].time;

   document.querySelector('#img').src = arraydata[currentImage].tmp;
}

setInterval(() => {
  currentTimer -= 0.5;
  if (currentTimer <= 0) {
    nextImage();
  }
}, 500);

//call this for init
nextImage();