0
當前在底部有圓圈可用於在幻燈片之間導航。我想添加下一個和上一個箭頭到用戶可以點擊的方向前進或後退通過幻燈片。我試圖在該內容滑塊上添加上一個和下一個箭頭
CSS：
#wrapper {
width: 2000px;
position: relative;
left: 0px;
transition: left 0.6s ease-in-out;
}
.content {
float: left;
width: 500px;
height: 300px;
white-space: normal;
background-repeat: no-repeat;
}
#contentContainer {
width: 500px;
height: 300px;
overflow: hidden;
}
#navLinks {
margin-top:-61px;
position:relative;
text-align: center;
width: 500px;
}
#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: rgba(204,204,204,0.8);
padding: 10px;
border-radius: 50%;
}
#navLinks ul li:hover {
background-color: #FFF;
}
#navLinks ul li.active {
background-color: rgba(156,227,100,0.9);
color: #FFFFFF;
}
#navLinks ul li.active:hover {
background-color: red;
color:#FFF;
}
#itemOne {
background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
background-image: url("http://cuteimages.net/data/2015/5/the-first-puppy-to-leave-me-speechless-name-cuteimages.net.png");
}
HTML：
<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="-500px"></li>
<li class="itemLinks" data-pos="-1000px"></li>
<li class="itemLinks" data-pos="-1500px"></li>
</ul>
</div>
的JavaScript：
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
var activeLink = 0;
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
link.itemID = i;
}
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
resetTimer();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
var timeoutID;
function startTimer() {
timeoutID = window.setInterval(goToNextItem, 2963);
}
startTimer();
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
} else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
這裏是的jsfiddle http://jsfiddle.net/stormbloom/2d0a1215/
我想了解這個個人經驗，否則我只會使用像WowSlider這樣的插件。如果通過從頭開始構建新的滑塊來實現這一點更容易，那麼任何指向資源的鏈接都可以解釋如何完成此操作。
你想帶箭頭的定製滑蓋的？ –