Question

我的代码：

<head>
<style>
...
    .content {
        float: left;
        position: absolute;
        display: block;
        margin: 0 auto;
        padding: 0;
        height: 720px;
        width: 100%;
        max-height: 100%;
        max-width: 100%;
        background-image: url("im1.jpg")
    }
    ...Positioning of #slider...
    ...Visual formatting of #pic1 #pic2 #pic3...
...
</style>
</head>
<body>
<div class="header">
    ...navigation bar...
</div>
<div class="content">
    <p>...some heading text...</p>
    <div id="slider">
        <span id="pic1">&#9679;</span>
        <span id="pic2">&#9679;</span>
        <span id="pic3">&#9679;</span>
    </div>
</div>
...more content...
</body>

我的目标是更改content类的背景图片，特别是让它向左滑动到另一个由相应项目符号（●）触发的图像。

我已查看this和this，但其中没有一个涉及我正在寻找的细节。

我想要的概述：

._______________. ._______________. ._______________.
|               | |               | |               |
|               | |               | |               |
|    Image 1    | |    Image 2    | |    Image 3    |
|     Main      | |               | |               |
|     . . .     | |     . . .     | |     . . .     |
|_______________| |_______________| |_______________|

  Click dot #1      Click dot #2      Click dot #3

如果他们不篡改我的布局，我非常愿意实施background-image以外的方法。虽然我想避免使用jQuery（它似乎不起作用），但我只会在它必须的时候使用它。我更喜欢普通的javascript和/或CSS。

我该怎么做？

Answer 1

这会吗？ HTML：

        <div class="content" id="content">
        <p>...some heading text...</p>
        <p>And some more text...............................</p>
        <div id="slider">
            <span id="pic1" onclick="chgBackground('book2.jpg');" style="cursor:pointer">&#9679;</span>
            <span id="pic2" onclick="chgBackground('book3.jpg');" style="cursor:pointer">&#9679;</span>
            <span id="pic3" onclick="chgBackground('book4.jpg');" style="cursor:pointer">&#9679;</span>
        </div>
    </div>

CSS：

        .content {
        float: left;
        position: absolute;
        display: block;
        margin: 0 auto;
        padding: 0;
        height: 720px;
        width: 100%;
        max-height: 100%;
        max-width: 100%;
        background-image: url("images/book2.jpg");
        background-repeat: no-repeat;
        background-position: center; 

         transition: background 1s linear;
    }

使用Javascript：

            function chgBackground(i) {

                var div = document.getElementById("content");
                div.style.backgroundImage = "url(images/"+i+")";
            }

<div>

1 个答案: