gpt4 book ai didi

javascript - HTML Div 和建议

转载 作者:行者123 更新时间:2023-11-28 07:05:04 25 4
gpt4 key购买 nike

我最近在我的内容 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>

最佳答案

  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

关于javascript - HTML Div 和建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33008423/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com