<div> 的背景图片幻灯片答案

【问题标题】：Slideshow of background image of <div><div> 的背景图片幻灯片
【发布时间】：2016-07-06 16:19:04
【问题描述】：

我的代码：

<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 类的背景图像，特别是使其向左滑动以查看由相应项目符号 (&#9679;) 触发的另一个图像。

我查看了 this 和 this，但没有一个解决我正在寻找的细节。

我想要的概述：

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

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

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

我该怎么办？

【问题讨论】：

标签： javascript html css background-image slideshow

【解决方案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+")";
            }

【讨论】：

谢谢，但不幸的是，这是我已经尝试过但未能奏效的方法之一。