javascript - HTML Div 和建议

Question

我最近在我的内容 slider 上得到了帮助，我想将图像更改为 div，以便我可以在其中放置信息等。

我知道它可能不是 super 复杂，但我不想搞砸其他一切，我想以正确的方式去做。我还询问有关页面边框周围黑色的任何建议。我希望它有一个干净的外观，但黑色绝对不适合它。

// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;

// setup the event listeners
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    // identify the item for the activeLink
    link.itemID = i;
}

// set first item as active
links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
    link.classList.add("active");

    var position = link.getAttribute("data-pos");
    wrapper.style.left = position;
}

body {
    background-color: black;
}
#wrapper {
    width: 5000px;
    position: relative;
    left: 0px;
    transition: left .5s ease-in-out;
}
.content {
    float: left;
    width: 1250px;
    height: 600px;
    white-space: normal;
    background-repeat: no-repeat;
}
#itemOne {
    background-color: #ADFF2F;
    background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
    background-color: #FF7F50;
    background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
    background-color: #1E90FF;
    background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
    background-color: #DC143C;
    background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
    width: 1250px;
    height: 600px;
    border: 5px black solid;
    overflow: hidden;
    margin-left: 3.5%;
    margin-right: 1%;
    text-align: center;
}
#navLinks {
    text-align: center;
    width: 100%;
    border:1px solid white;
}
#navLinks ul {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    margin-top: 6px;
}
#navLinks ul li {
    float: left;
    text-align: center;
    margin: 10px;
    list-style: none;
    cursor: pointer;
    background-color: lightgray;
    padding: 90px;
    border-radius: 10%;
    border: white 5px solid;
}
#navLinks ul li:hover {
    background-color: #FFFF00;
}
#navLinks ul li.active {
    background-color: #333333;
    color: #FFFFFF;
    outline-width: 7px;
}
#navLinks ul li.active:hover {
    background-color: #484848;
    color: #FFFFFF;
}
#navLinks ul li.active {
    background-color: #333333;
    color: #FFFFFF;
    outline-width: 7px;
}
#navLinks ul li.active:hover {
    background-color: #484848;
    color: #FFFFFF;
}
#b1 {
    background-image: url(100x100.gif);
}

<div id="contentContainer">
    <div id="wrapper">
        <div id="itemOne" class="content"></div>
        <div id="itemTwo" class="content"></div>
        <div id="itemThree" class="content"></div>
        <div id="itemFour" class="content"></div>
    </div>
</div>
<div id="navLinks">
    <ul>
        <li class="itemLinks" id="b1" data-pos="0px"></li>
        <li class="itemLinks" id="b2" data-pos="-1250px"></li>
        <li class="itemLinks" id="b3" data-pos="-2500px"></li>
        <li class="itemLinks" id="b4" data-pos="-3750px"></li>
        <li class="itemLinks" id="b5" data-pos="-5000px"></li>
        <li class="itemLinks" id="b6" data-pos="-6250px"></li>
    </ul>
</div>

Answer 1

1. 正如 LGSon 所说，没有 <img>你的html中的标签，只有<div>背景设置为图像的容器:

CSS

#itemOne {
  background-color: #ADFF2F;
  background-image: url("http://www.kirupa.com/images/blueSquare.png");
}

1. 如果您想取消设置这些图像，只需删除 background-image属性(property)
2. 如果您想向这些容器中添加一些内容，请将其放在<div id="itemOne" class="content"> 之间。和 </div>
3. 如果你想去掉这些彩色大容器周围的黑色边框，你应该删除 border来自 #contentContainer 的属性(property)或将其设置为 none :

CSS

#contentContainer {
border: 5px black solid;
}

1. 如果你想摆脱围绕这个边界的黑色，那么删除background-color: black;来自 body