如何在 html 中制作幻灯片横幅？答案

【问题标题】：How to make a slideshow banner in html?如何在 html 中制作幻灯片横幅？
【发布时间】：2015-06-02 22:46:13
【问题描述】：

我想让我的横幅像幻灯片一样自动更改。我从文件夹中取出的横幅，它可以读取该文件夹中的所有横幅并在网站上显示它会自动更改。我已经让它阅读所有横幅并将其显示在网站上，但它是一种随机图像，除非我重新加载页面，否则不会改变。这是代码：

<?php 
     $imglist=''; 
     //$img_folder is the variable that holds the path to the banner images. 
     // see that you dont forget about the "/" at the end 
     $img_folder = "images/"; 
     mt_srand( (double)microtime()*1000 ); 
     //use the directory class 
     $imgs = dir($img_folder); 
     //read all files from the directory, checks if are images and ads them to a list (see below how to display flash banners) 
     while ( $file = $imgs->read() ) 
     { 
         if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
          $imglist .= "$file "; 
     } 
     closedir($imgs->handle); 
     //put all images into an array 
     $imglist = explode(" ", $imglist); $no = sizeof($imglist)-2; 
    //generate a random number between 0 and the number of images 
     $random = mt_rand(0, $no); $image = $imglist[$random]; 
    //display image 
    echo '<img class="img-responsive" src="'.$img_folder.$image.'" border=0>'; 
?>

以及如何将 PHP 转换为 HTML？如果我将扩展名更改为 html，则横幅 div 会显示代码而不是图像。谢谢。

【问题讨论】：

标签： javascript php jquery html slideshow

【解决方案1】：

首先，让您的 PHP 回显一个隐藏的 <input> 元素，其值包含图像路径的 JSON 字符串。使用您的代码，例如：

<?php

    $out = " /*  Beginning of your page code */  "

    $imgJSON = json_encode($imglist);
    $out .= '<input id="bans" type="hidden" value="' .$imgJSON. '" />';

    $out .= " /*  Rest of your page code */  "

    echo $out;
    die();

然后，您可以使用下面的示例来交换横幅 div 中的图像。我演示了一个非常简单的动画，只是为了展示它是如何完成的。

jsFiddle Demo

HTML：

<!--  Not req if you echoed out a hidden input via PHP: 
<input type="hidden" id="bans" value='["300/49","300/51","297/50","298/51"]' />
-->
<div id="banner"></div>

javascript/jQuery:

var i = $('#bans').val();

var j = JSON.parse(i);
var max = j.length - 1;
var cnt = 0;

var timerId = null;
function swapBannersTimer() {
    doSwap();
    timerId = setTimeout(swapBannersTimer, 3000);
}
function doSwap(){
    var str = 'http://placekitten.com/' + j[cnt];
    $('#banner')
        .html('<img class="far_right" src="'+str+'" />')
        .promise()
        .done(function(){
            $('img').animate({
                marginLeft: '0px'
            },500);
        });
    cnt = (cnt < max) ? cnt+1 : 0;
}
swapBannersTimer();

**CSS:*

#banner{width:300px;height:52px;overflow:hidden;}
.far_right{margin-left:300px;}

注意：因为这个例子使用了 jQuery 库，你必须在你的页面中包含它——通常在 DIV 标签之间，像这样：

<head>
    <!-- other stuff in head -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

如果你使用CDN加载jQuery，如上例，它可能已经从其他网站预加载了。

如果您想快速学习 jQuery，请在此处找到免费视频教程：

https://www.thenewboston.com/videos.php?cat=32

或在

https://phpacademy.org/videos/jquery-basics

【讨论】：

【解决方案2】：

您正在执行的操作的伪代码类似于：

将目录中的图像加载到数组中在页面加载时从图像数组中选择一个随机图像显示第一张图片每 X 秒显示图像数组中的另一张图像

要正确显示，您的 php 文件需要从 Web 服务器加载/提供。为此，请将您的 php 文件部署到您的 Web 服务器，然后对其进行测试。

我几年前创建的横幅示例，与您所追求的类似，is here

【讨论】：