Question

让我们说我在我的网站上有一定数量的图像作为背景，完全覆盖。

对于每张背景图片，我想要在屏幕中央显示特定文字。

每个背景图像及其相应的文本都应该随机点击一下按钮。

我现在不需要任何JavaScript或jQuery，这似乎是解决方案。虽然，我找不到任何好的代码来解决我的问题。有代码可以做我想要的吗？

谢谢！

JSFiddle网站演示。

HTML：

<div id="background">
    <div id="box">
        <div class="title">TITLE OF WEBSITE</div>
        <div class="text">Text corresponding to the specfic background shown.</div>
        <div class="button">
            <button type="button">Randomizing button</button>
        </div>
    </div>
</div>

CSS：

html, body {
    height: 100%;
}
#background {
    height: 100%;
}
#box {
    background: #fff;
    width: 40%;
    min-width: 400px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    top: 40%;
    position: relative;
}
.title {
    width: 100%;
    height: 50px;
    float: left;
    background: #e1e1e1;
    text-align: center;
    font-size: 24px;
    line-height:50px;
}
.text {
    background: #c8c8c8;
    width: 100%;
    height: 100px;
    float: left;
    text-align: center;
    font-size: 18px;
    position: relative;
    padding-top: 20px;
}
.button {
    width: 100%;
    height: 50px;
    float: left;
    text-align: center;
    background: #afafaf;
}

Answer 1

DEMO

<强> HTML ：

<div id="background">
    <div id="box">
        <div class="title">TITLE OF WEBSITE</div>
        <div class="text" id="text">Text corresponding to the specfic background shown.</div>
        <div class="button">
            <button type="button" id="btn">Randomizing button</button>
        </div>
    </div>
</div>

<强>的JavaScript ：

var bks=new Array("http://jsfiddle.net/img/logo.png","http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b");
/* This Array 'bk' will hold the random images you want to set as background */
var desc=new Array("JSFIDDLE LOGO","SO SPRITE");
/* This array 'desc' will hold the description of respective image  want to display */
var bk=document.getElementById("background");
var div=document.getElementById("text");
var btn=document.getElementById("btn");
var count=0;
function doIT(){
bk.style["background"]="url('"+bks[count]+"') center center";
    div.innerHTML=desc[count];
    count=count?0:1;
    /* To Change the count randomly use :
     count=Math.floor( Math.random() * ( bks.length - 0 ) ) + 0;
      SEE: http://jsfiddle.net/cu7jcz8m/7/
    */
}

btn.addEventListener("click",doIT);

希望它有所帮助。干杯:)！

Answer 2

我已更新您的JSFiddle Here

HTML （刚添加的ID）

<div id="background">
    <div id="box">
        <div class="title">TITLE OF WEBSITE</div>
        <div class="text" id="text-box">Text corresponding to the specfic background shown.</div>
        <div class="button">
            <button type="button" id="my-button">Randomizing button</button>
        </div>
    </div>
</div>

<强> JS

var myData = { // Create a JSON for your images
    1: {
        imageUrl: "http://lorempixel.com/800/800/cats/1",
        text: "This is the text for image 1"
    }, 
    2: {
        imageUrl: "http://lorempixel.com/800/800/cats/2",
        text: "This is the text for image 2"
    }, 
    3: {
        imageUrl: "http://lorempixel.com/800/800/cats/3",
        text: "This is the text for image 3"
    }, 
    4: {
        imageUrl: "http://lorempixel.com/800/800/cats/4",
        text: "This is the text for image 4"
    }, 
    5: {
        imageUrl: "http://lorempixel.com/800/800/cats/5",
        text: "This is the text for image 5"
    }, 
    6: {
        imageUrl: "http://lorempixel.com/800/800/cats/6",
        text: "This is the text for image 6"
    }, 
    7: {
        imageUrl: "http://lorempixel.com/800/800/cats/7",
        text: "This is the text for image 7"
    }, 
    8: {
        imageUrl: "http://lorempixel.com/800/800/cats/8",
        text: "This is the text for image 8"
    }, 
    9: {
        imageUrl: "http://lorempixel.com/800/800/cats/9",
        text: "This is the text for image 9"
    }, 
    10: {
        imageUrl: "http://lorempixel.com/800/800/cats/10",
        text: "This is the text for image 10"
    }
};
function changeImage(){
    var randomNumber = Math.floor((Math.random() * 10) + 1); //Change 10 to the number of images in your JSON
    document.getElementById("background").style.background = "url('"+myData[randomNumber].imageUrl+"')";
    document.getElementById("text-box").innerHTML = myData[randomNumber].text;
}

document.getElementById("my-button").addEventListener("click",changeImage); //Bind the button to the changeImage function

更改为随机背景图像和单击按钮上的相应文本？

2 个答案: