0
在我把HTML和CSS之前，我有2個問題，請保持我的，我幾乎是一個完整的業餘的HTML和CSS，並不知道JavaScript的意思。Javascript內容滑塊
問題：
我的第一個問題是，內容代爾，犯規滑動遠遠不夠，接下來的內容，而是點擊該按鈕時，只有一半帶來了內容上（你會看到什麼我的意思是當你將html和css粘貼到頁面中時）。
我的第二個問題是按鈕的意思是水平的海誓山盟，我也想添加更多的未來
所以，如果有人能告訴我該怎麼做，在闡述與JavaScript的問題，這將是偉大的！
這裏的工作演示的jsfiddle請退房
感謝你提前.. !!
// 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;
}#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: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
width: 22.5%;
}
#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: #CCCCCC;
padding: 100px;
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;
}<body bgcolor='black'>
<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" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
</body>
你可以把它放在jsfiddle並提供一個鏈接？ –
你在這件事上使用了一些驚人的巨大div！問題是你的尺寸有嚴格的規定，而你使用的偏移量不符合滑塊中div的寬度。這裏是一個小提琴 - https://jsfiddle.net/9gpyL6o1/ – Matt
嘿大家謝謝你的幫助！但現在我只是想知道邊緣問題是什麼，我有6個導航鏈接，但它們似乎停止在頁面右側15％左右。同樣對於內容滑塊，將使用什麼代碼來居中呢？ – Connor