Question

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

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

background-image：url（https://example.com/wp-content/uploads/homeslider/rotator.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);
    }
}

?>

Answer 1

您可以使用设置间隔函数内的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

背景图像rotator.php + jquery每隔4秒显示随机照片

1 个答案: