我想在頁面刷新時更改背景圖像圖案。我已經嘗試了許多代碼，但沒有按要求工作

Question

這是我要更改頁面刷新圖像的完整代碼。 這是我正在使用的代碼，但無法正常工作。

<SCRIPT LANGUAGE="JavaScript">

    var theImages = new Array()

    theImages[0] = 'images/1.png'
    theImages[1] = 'images/2.png'
    theImages[2] = 'images/3.png'

    var j = 0
    var p = theImages.length;
    var preBuffer = new Array()

    for (i = 0; i < p; i++){
        preBuffer[i] = new Image()
        preBuffer[i].src = theImages[i]
    }
    var whichImage = Math.round(Math.random()*(p-1));

    function showImage(){
        if(whichImage==0){
            document.write('<a href ="link.html">
            <img src="'+theImages[whichImage]+'"');
        }
        else if(whichImage==1){
            document.write('<a href ="link.html">
            <img   src="'+theImages[whichImage]+'"');
        }
        else if(whichImage==2){
            document.write('<a href ="link.html">
            <img src="'+theImages[whichImage]+'"');
        }
        else if(whichImage==3){
            document.write('<a href ="link.html">
           <img  src="'+theImages[whichImage]+'"');

        }
        else if(whichImage==4){
            document.write('<a href ="link.html">
            <img src="'+theImages[whichImage]+'"');
        }


    }
</SCRIPT>

..這是我想更改圖像的html代碼。 我叫腳本功能的地方。

<div  class="under_header" style="height:600px;margin-top:0px;     background:url(<script>showImage();</script>) ,  url(images/latest_movie/<?php echo $movie_image; ?>) center 76px fixed no-repeat; -moz-background-size:auto, over; background-size:auto, cover; 

box-shadow: inset 945px 0px 645px -645px black, inset -945px 0px 645px -645px black;">                                

</div>

Answer 1

您不能在樣式屬性的CSS字符串中放置script標簽。

在JavaScript中而不是在CSS中嘗試這樣的操作：

document.getElementsByClassName("under_header")[0].style.background = "url("+showImage()+") ,  url(images/latest_movie/<?php echo $movie_image; ?>) center 76px fixed no-repeat";

Answer 2

不知道您是否已經解決了問題，但是正如雅克所說，調用腳本的方式將行不通。

無需檢查“ whichImage”的值，可以執行以下操作：

function showImage() {
  $('.under_header').append('<a href ="link.html"><img src="' + theImages[whichImage] + '"></a>');

}

這是一個小提琴，人們喜歡小提琴。 https://jsfiddle.net/Sprazer/va9j5sb0/

很抱歉使用jQuery

Answer 3

您嘗試將javascript和CSS結合使用的方式將無效。 下面的示例將背景圖像隨機設置到目標div。

在onload事件上onload showImage函數。 因此，每次刷新頁面時，該div都會具有不同的背景圖像。

使用此示例來構建您想要在頁面刷新上使用的任何功能。

<html>
    <head>
        <script language="JavaScript">
            var theImages = new Array();

            theImages[0] = 'images/1.jpg';
            theImages[1] = 'images/2.jpg';
            theImages[2] = 'images/3.jpg';

            var p = theImages.length;
            var whichImage = Math.round(Math.random()*(p-1));

            function showImage(){
                document.getElementById('myDiv').style.backgroundImage="url('" + theImages[whichImage] + "')";
            }
        </script>
    </head>

    <body onload="showImage()">

        <div id="myDiv" style="width:300px; height: 200px;" />

    </body>

</html>

我想在頁面刷新時更改背景圖像圖案。我已經嘗試了許多代碼，但沒有按要求工作

問題描述

3 個解決方案

解決方案1
3 2015-11-24 12:49:19

解決方案2
1 2015-11-24 13:12:39

解決方案3
1 2015-11-25 13:21:36

我想在頁面刷新時更改背景圖像圖案。 我已經嘗試了許多代碼，但沒有按要求工作

問題描述

3 個解決方案

解決方案1 3 2015-11-24 12:49:19

解決方案2 1 2015-11-24 13:12:39

解決方案3 1 2015-11-25 13:21:36

我想在頁面刷新時更改背景圖像圖案。我已經嘗試了許多代碼，但沒有按要求工作

解決方案1
3 2015-11-24 12:49:19

解決方案2
1 2015-11-24 13:12:39

解決方案3
1 2015-11-25 13:21:36