个人中心
gpt4 book ai didi

javascript - 背景图片 rotator.php + jquery 每 4 秒显示一次随机照片

转载 作者：行者123 更新时间：2023-11-30 12:03:34 24 4
gpt4 key购买 nike

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

我到处找了，不知道可不可以。我想设置这样一个部分的背景:

背景图片: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);
    }
}

?>

最佳答案

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

关于javascript - 背景图片 rotator.php + jquery 每 4 秒显示一次随机照片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35972105/

24 4 0
文章推荐： javascript - 如何在 WordPress 中覆盖 JS 函数
文章推荐： javascript - 在html中接受输入作为Json并发送http请求
文章推荐： javascript - 遍历 div，然后遍历其中的列表项
文章推荐： javascript - 嵌套的 div 和 'cannot set property ' innerHTML' of null' 错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com