Question

我一直在尝试使用http://25000paintings.com等图片幻灯片网站我从朋友那里得到了代码并编码了需求，但现在我遇到了如何运行图像js的问题。这些图片是否需要转换为php。文件以及如何使用大约200张图片获取脚本。所有最好的luk。

这里是js。：

var int = setInterval(refresh_painting, 10000);
function refresh_painting()
{
  var p = document.getElementById("painting");
  p.src = "./painting.php" + "?" + Date.parse(new Date());
}
$(window).bind("resize", function(){update_pos();});

function update_pos(){
        var window_width=$(window).width();
        // $(".detail").width = max()
        $(".detail").width(window_width / 2);
        $(".detail").css("left", (window_width) / 4);
        // $(".abstract").css("right", window_width);
        var window_height=$(window).height();
        var detail_height=$(".detail").height();
        var abstract_height=$(".abstract").height();
        $(".detail").css("top", (window_height - detail_height) / 2);
        // $(".abstract").css("top", (window_height - abstract_height) / 2);
    }
function toggle_detail(showOrHide){
    if (showOrHide !== false) {
        showOrHide = 250;
    }
    $('#detail').toggle((showOrHide));
    $('#overlay').toggle(showOrHide);
}
function full_screen(hide){
    p = $('#paintings');
    if (p.hasClass('full_screen') | hide === false){
        p.removeClass('full_screen');
        p.addClass('paintings');
    } else {
        p.addClass('full_screen');
        p.removeClass('paintings');
    }
}
$(document).bind ('keyup.detail', function (k) {
    if (k.keyCode == 27) {
        toggle_detail(false);
        full_screen(false);
    }
});
update_pos();
full_screen();
// $(".abstract").css("position", "absolute");
// toggle_detail();

这里是.html文件中的必需部分。

</div>
<div id="paintings" class="full_screen">
    <img class="painting" id="painting" src="./painting.php") onclick="javascript:full_screen();" alt="painting">
</div>
<div id="overlay" class="overlay"></div>

<script type="text/javascript" src="./paintings.js"></script>

我希望你能帮助我！非常感谢！

Answer 1

您无需将图像转换为.php文件。您的示例中的painting.php文件将是一个脚本，它将发回一个从图像池中随机选择的图像（Date.parse(new Date())部分可能充当脚本中随机数生成器的种子）。 / p>

对于一些图像的简单旋转，您只需添加一个包含一堆图像网址的数组，在refresh_painting()函数中随机选择一个，然后设置p.src = random image，如下所示：

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
function refresh_painting() {
  var p = document.getElementById("painting");
  var random_image = images[Math.floor(Math.random() * images.length)];
  p.src = random_image;
}

幻灯片php图片加载不工作

1 个答案: