如何将下一个/上一个按钮添加到JavaScript（PHP/MySQL）图像滑块？_Javascript_Php_Mysql

如何将下一个/上一个按钮添加到JavaScript（PHP/MySQL）图像滑块？

javascript php mysql

如何将下一个/上一个按钮添加到JavaScript（PHP/MySQL）图像滑块？,javascript,php,mysql,Javascript,Php,Mysql,我有以下代码从MySQL数据库获取图像，并将其显示在滑块中。有人能告诉我如何添加下一个/上一个按钮吗。任何帮助都将不胜感激，谢谢 <img id="slide" src="./pics/image1.jpg" alt="slideshow" width="300" height="300"> <script> var time = 5000, // time between images i = 0, // index for chan

我有以下代码从MySQL数据库获取图像，并将其显示在滑块中。有人能告诉我如何添加下一个/上一个按钮吗。任何帮助都将不胜感激，谢谢

<img id="slide" src="./pics/image1.jpg" alt="slideshow" width="300" height="300">


<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);
});


var time=5000，//图像之间的时间
i=0，//用于更改图像的索引
images=[]，//来自PHP的img src数组
预加载=[]，//预加载图像的数组
幻灯片=document.getElementById（“幻灯片”）；
图像=；//从PHP到Js数组
var len=images.length；
函数更改img（）{
slide.src=预载[i].src；
如果（++i>len-1）{
i=0；
}
设置超时（更改，时间）；
}
函数预加载（）{
对于（var c=0；c从上一个线程开始的后续操作，类似于下面的操作。第一个图像被硬编码到位，因此关闭javascript的用户仍将看到第一个图像。此外，在页面加载时，第一个图像是可见的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slideshow from PHP - Button Controlled</title>
<style>
p {
  width: 300px; 
  display: flex; justify-content: space-between;
}
#prev, #next {
  background: #aaa; padding: 5px; width: 6em;
  text-align: center; cursor: pointer;
}
</style>
</head>
<body>
<div>
  <img id="slide" src="./pics/image1.jpg" alt="slideshow" width="300" height="300">
  <p>
    <span id="prev">Previous</span>
    <span id="next">Next</span>
  </p>
</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(dirn){
  i += dirn;
  if (i > len-1){
    i = 0;
  }
  if (i < 0) {
    i = len-1;
  }
  slide.src = preloads[i].src;
}
function preload(){
  for (var c=0; c<len; c++){
    preloads[c] = new Image;
    preloads[c].src = images[c];
  }
}
window.addEventListener("load", preload);
document.getElementById("prev").addEventListener("click", function(){
  changeImg(-1);
});
document.getElementById("next").addEventListener("click", function(){
  changeImg(1);
});
</script>
</body>
</html>


从PHP播放幻灯片-按钮控制
p{
宽度：300px；
显示：柔性；对齐内容：间距；
}
#上一个#下一个{
背景：aaa；填充：5px；宽度：6em；
文本对齐：居中；光标：指针；
}

以前的
下一个

var time=5000，//图像之间的时间
i=0，//用于更改图像的索引
images=[]，//来自PHP的img src数组
预加载=[]，//预加载图像的数组
幻灯片=document.getElementById（“幻灯片”）；
images=；//从PHP到Js数组
var len=images.length；
功能更改img（dirn）{
i+=dirn；
如果（i>len-1）{
i=0；
}
if（i<0）{
i=len-1；
}
slide.src=预载[i].src；
}
函数预加载（）{
对于（var c=0；cShow uschangeImg
。不作为评论…通过编辑帖子将其添加到您的OP中。当您多次单击它时是否会发生这种情况？控制台是否显示任何错误？我是否将mySlide函数中的三重等于===更改为普通的双等于==这解决了问题？这很好，谢谢！我知道ha的意义何在第一个图像是硬编码的。但是如何显示数据库中的第一个图像呢？因为我不想看到数据库中的其他图像，这与后端有更多关系，所以请在另一个线程中查看我的注释。JavaScript确实会在所有其他图像之前显示从数据库中检索到的第一个图像。