背景图像旋转器.php + jQuery每4秒显示一次随机照片

background image rotator.php + jquery to show random photo every 4 sec

本文关键字：一次 照片 随机 显示 4秒 旋转 图像 php jQuery 背景      更新时间：2023-09-26

我们都知道标准的旋转器php脚本，每次刷新页面时都会显示一张新照片。

我到处搜索过，不知道是否有可能。我想像这样设置一个部分的背景：

背景图片：网址（https://example.com/wp-内容/上传/主页滑块/旋转器.php）;

是否可以在 php 中添加一些 jQuery 代码，以便背景图像每 4 秒刷新一次？

在 php 本身中添加刷新不起作用。

    <?php
$folder = '/home/example/public_html/wp-content/uploads/homeslider';
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
$img = null;
if (substr($folder,-1) != '/') {
    $folder = $folder.'/';
}
if (isset($_GET['img'])) {
    $imageInfo = pathinfo($_GET['img']);
    if (
        isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
        $img = $folder.$imageInfo['basename'];
    }
} else {
    $fileList = array();
    $handle = opendir($folder);
    while ( false !== ( $file = readdir($handle) ) ) {
        $file_info = pathinfo($file);
        if (
            isset( $extList[ strtolower( $file_info['extension'] ) ] )
        ) {
            $fileList[] = $file;
        }
    }
    closedir($handle);
    if (count($fileList) > 0) {
        $imageNumber = time() % count($fileList);
        $img = $folder.$fileList[$imageNumber];
    }
}
if ($img!=null) {
    $imageInfo = pathinfo($img);
    $contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
    header ($contentType);
    readfile($img);
} else {
    if ( function_exists('imagecreate') ) {
        header ("Content-type: image/png");
        $im = @imagecreate (100, 100)
            or die ("Cannot initialize new GD image stream");
        $background_color = imagecolorallocate ($im, 255, 255, 255);
        $text_color = imagecolorallocate ($im, 0,0,0);
        imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
        imagepng ($im);
        imagedestroy($im);
    }
}
?>

您可以在设置间隔函数中使用 JQuery css 函数，每四秒更改一次背景图像。

.HTML： 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Changing Element Background Image with JQuery</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id="target">

        </div>

        <script src="js/jquery.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

CSS（需要确保元素具有高度，以便显示图像）：

#target{   
    height:400px;
}

JavaScript：

(function($){//begin closure
//variable to keep the index count
var count = 0;

//time in milliseconds(currently set to 4 seconds)
var milliseconds = 4000;

setInterval(function(){
//selects an element with an id of target
//use .className if you want to select an element by a className
var selector = "#target";
//Array to store image urls(replace with the urls of your images)
var images= ["images/pic1.png",
             "images/pic2.jpg"];

//change the background image
$(selector).css("background-image", "url(" + images[count] +")");

//If the count is less than the image array length - 1,
//Explanation: Array indexes start at 0 so you will need to subtract
//1 to match array index. If you do not subract one then the code will
//try and load images[2] which doesn't exist.
if(count < images.length - 1){
//increment the count
count++;

}
else{
//reset count to 0 when the the last index is reached.
count = 0;

}

},milliseconds);//<-- pass in the interval time to execute the code

})(jQuery);//end closure

带动画过渡的版本：

(function($){//begin closure
//variable to keep the index count
var count = 0;
//Time in milliseconds(currently set to 4 seconds)for the setInterval Function
//
var milliseconds = 4000;
//Time in milliseconds for the animated transition.
var transitionTime = 1500;    
//selects an element with an id of target
//use .className if you want to select an element by a className
var selector = "#target";

setInterval(function(){

//Array to store image urls(replace with the urls of your images)
var images= ["images/pic1.png",
             "images/pic2.jpg"];

//create a new image
var tempImage = new Image();
//add the image src
tempImage.src = images[count];

//on load event for the image object
$(tempImage).on("load",function(){//begin event


//set the opacity of the element to zero(transparent),
//animate it to opaque by setting its opacity to 1
$(selector).css("opacity","0")
        .animate({ opacity: 1 }, { duration: transitionTime });
//change the background image
$(selector).css("background-image", "url(" + tempImage.src +")");

});//end event

//If the count is less than the image array length - 1,
//Explanation: Array indexes start at 0 so you will need to subtract
//1 to match array index. If you do not subract one then the code will
//try and load images[2] which doesn't exist.
if(count < images.length - 1){
//increment the count
count++;

}
else{
//reset count to 0 when the the last index is reached.
count = 0;

}

},milliseconds);//<-- pass in the interval time to execute the code

})(jQuery);//end closure
相关文章：