Question

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

<?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显示代码而不是图像。感谢。

Answer 1

你正在做的事情的伪代码会像：

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

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

我创建了几年agao的横幅示例，与您所追求的相似，is here

Answer 2

首先，让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

如何在HTML中制作幻灯片横幅？

2 个答案: